Основано на реальных событиях…
Будучи администратором одного из известных форумов, я часто сталкиваюсь с тем, что начинающие веб-технологи не знают, с чего начать своё обучение, какую читать литературу и в каком направлении им двигаться. Периодически мне доводится слышать один и тот же вопрос — «Как стать хорошим верстальщиком?». Краткий ответ может оставить у новичка ещё больше вопросов, поэтому одного или нескольких постов с ответами на форуме недостаточно, чтобы полностью описать все необходимые, на мой взгляд, пункты.
В этой статье я решил исправить ситуацию и описать свой путь обучения, который считаю наиболее правильным и эффективным.
Верстальщик или веб-мастер?
Перед тем, как начать прокладывать свой путь верстальщика, нужно определиться, какого уровня вы планируете достичь, и что для этого вообще предстоит изучать. Многие, конечно, скажут: «Что значит «какого уровня»? Конечно же, самого высокого! Что за вопрос?». Но на практике это, как правило, не так. Здесь всё сводится к тому, как и насколько глубоко вы планируете погрузиться в этот мир и через что готовы пройти ради достижения своей цели. К сожалению, большинство предпочитает выпить пивка вместо того, чтобы почитать книжку, но при этом считают себя великими мастерами. Но — не будем о грустном и перейдём сразу к делу.
Лично для себя я могу выделить две категории верстальщиков — «обычный верстальщик» и «веб-мастер».
Обычный верстальщик
Обычный верстальщик — это человек, который знает по минимуму. Вот технологии, которые, по моему мнению, подходят для этой категории разработчиков:
- HTML;
- CSS
- jQuery (всякие плагинчики);
- возможно ещё что-то по мелочи.
Не густо, учитывая тот факт, что все эти вещи обычный верстальщик должен знать на среднем уровне. Обычно таким верстальщикам достаточно сверстать простенький макетик и «прикрутить» какой-нибудь плагин на jQuery.
Мы не будем уделять много времени этой категории, потому что она того не стоит. Во-первых, она мне не симпатизирует, а во-вторых, в этой статье мы подготавливаем настоящего бойца, так что не будем здесь задерживаться, и перейдём к «веб-мастеру».
Веб-мастер
Вот это уже другое дело! Именно эта категория и является моей первостепенной целью, к которой я стремлюсь. На мой взгляд, веб-мастер должен обладать большими навыками, причём на очень хорошем уровне! Этот человек обязан знать много технологий и разбираться в их тонкостях.
Давайте посмотрим на технологии, владение которыми входит в обязанности настоящего веб-мастера:
- HTML5;
- XHTML;
- HTML 4.01;
- XML;
- AJAX;
- CSS 2.1;
- CSS3;
- CSS-фреймворки;
- JavaScript ;
- JS-фреймворки (в первую очередь jQuery);
- системы управления версиями (Git, SVN и т.д.);
А также я бы добавил в этот список PHP, хотя бы на уровне этой страницы. Главное — умение понимать код PHP и решить какую-либо простенькую задачку.
Кроме того, веб-мастер обязан уметь работать с различными популярными CMS. Это умение не обязательно должно быть на глубоком уровне (написание плагинов к CMS или кардинальное изменение или расширение её функционала). Но, например, создавать адаптированные к CMS шаблоны из обычных HTML-страниц настоящий веб-мастер, без сомнений, должен уметь.
Нехилый такой списочек, не правда ли? Но не забывайте, что у каждого пункта (кроме PHP) есть свои ветки, которые могут включать в себя ещё много подпунктов, которые следует изучить, чтобы в совершенстве овладеть каждой технологией.
Как вы уже поняли, познать все эти вещи очень непросто. Это потребует от вас усидчивости, целеустремлённости и огромного желания изучать их. Но если вы хотите стать настоящим веб-мастером, то другого выхода у вас просто нет!
Ну что, вы всё ещё желаете стать верстальщиком? Подумайте, я подожду вас, правда:)
Английский язык
Следующим обязательным пунктом в нашем списке идёт «Английский язык». Если честно, этот пункт настолько важен, что мне хотелось поставить его первым. Дело в том, что, к сожалению, так вышло, что вся интересная и по-настоящему полезная литература выходит именно на английском языке, а до нас доходят лишь переводы, которые, порой, так долго пишутся или настолько задерживаются в редакции, что информация уже становится неактуальной.
И это касается не только книг. Именно западные блоги, сайты, форумы, да и вообще западные ресурсы в целом являются первоисточниками самой свежей и актуальной информации. То ли потому, что их просто больше, то ли потому, что зарубежные авторы менее стеснительные, чем русскоязычные разработчики, итог один — креативных и познавательных новинок среди англоязычных источников гораздо больше.
Кроме того, английский язык необходим для переписки с западными коллегами, обмена опытом, идеями, для участия в полезных и познавательных дискуссиях и т.д.
Ну и, конечно же, не стоит забывать, что все спецификации по технологиям написаны именно на английском языке.
Что читать?
Чтение в жизни веб-мастера занимает далеко не последнее место и должно идти с ним по жизни. Ежедневное чтение полезной литературы и спецификаций, безусловно, окажет неоспоримую помощь верстальщику в его дороге к настоящему мастеру своего дела.
Но, как это часто бывает, не всё, что можно прочитать — нужно прочитать. Сейчас я постараюсь выделить из огромной массы материалов только те, чтение и понимание которых действительно могут принести пользу в нашем деле.
Стандарты веб-технологий
Как говорят умные и матёрые дядьки: «Лучшая литература — это спецификация». И я лично с ними полностью согласен. Спецификация — это последняя инстанция и главный авторитет, который описывает поведение и логику всех свойств, методов или элементов в зависимости от технологии. Можно сказать, что спецификация — это закон, которому должны следовать все браузеры без исключения. Если поведение описано в спецификации, каким бы странным оно ни казалось — то это фича, а не баг (и у этой фичи наверняка есть своя логика), а если в спецификации написано одно, а в браузерах получается другое — значит, косяк именно в браузерах, и нужно штурмовать их разработчиков баг-репортами.
Книги
Несмотря на то, что книгам я отдал вторую по важности позицию, это отнюдь не означает, что им можно предпочесть спецификации и только. Напротив, я считаю, что книги являются отличным и, главное, очень важным дополнением к первым. Из книг можно многое взять и почерпнуть. По книгам можно легко изучать технологии, смотреть на то, как их авторы (а среди них часто встречаются и великие гуру) объясняют на примерах и раскладывают по полочкам даже самые сложные задачи и механизмы. Конечно же, полезность той или иной книги зависит от качества её материала и содержания, но если вы выбираете правильные книги, то не сомневайтесь, что они принесут вам только пользу!
Как я говорил выше, процент западной литературы преобладает над русскоязычной, и логично, что это касается и книг. Западные коллеги с радостью делятся с миром своими идеями и открытиями, поэтому, скорее всего, книги именно западных авторов будут занимать весомую долю на ваших полках. Отчасти это снова толчок для изучения английского языка, так как в противном случае вам придётся ждать, пока полезную книгу кто-нибудь переведёт, что само по себе не очень хорошо. Более того, многое из западной литературы вообще не доходит до перевода, и в этом случае без знания английского вам будет просто невозможно почерпнуть что-либо из таких книг.
"Какие книги посоветуете?"
Мне задавали этот вопрос настолько часто, что я даже решил придумать свой алгоритм выбора хороших книг. Со временем любая книга теряет свою актуальность (хотя бывают и исключения), поэтому приходится советовать что-то новое. Но, так как за последними новинками я не поспеваю, то и советчик из меня, мягко говоря, никакой. Поэтому представим, что нам нужна актуальная книжка по CSS, и последуем моему алгоритму:
- Заходим на ozon.ru.
- Вбиваем в поиске «CSS3», жмём кнопку «Найти» и попадаем в книжный раздел по CSS3.
- В горизонтальном списке ссылок нажимаем «по новинкам».
- Идём сверху вниз, отсеивая книги по другим технологиям (да, такие попадаются), открываем и читаем информацию и комментарии по каждой книге. А также советуемся со старшими товарищами (можно даже на форумах), забрасываем понравившуюся литературу в корзину, чтобы в дальнейшем сделать заказ.
Стоит заметить, что ozon.ru я выбрал ради примера. Само собой, вы можете выбрать любой хороший магазин на ваш взгляд. Главное — учесть мой простой алгоритм.
В случае, если вы всё-таки взяли себя в руки и выучили английский язык, то вашему взору откроются и другие вкусные местечки в интернете. Например, такие как amazon.com и другие популярные интернет-магазины. Надеюсь, вы еще не забыли, насколько долго можно ожидать перевод той или иной книги ;-)
Сайты и блоги
Спецификации и книжки — это, конечно же, здорово, но не меньшее внимание стоит уделять сайтам и блогам. Именно на них, как правило, появляется самая новая и актуальная информация. Причина этого проста: сайт или блог — прекрасный и быстрый способ поделиться с миром своими мыслями или идеями. В абсолютном большинстве случаев почти у каждого опытного разработчика есть свой блог.
Конечно же, в этом море веб-ресурсов есть как полезные, так и не очень по содержанию сайты. Но если вы последуете совету про ежедневное чтение разных источников, то со временем уже сами научитесь фильтровать действительно хорошую и полезную информацию.
От себя же, пожалуй, посоветую некоторые из качественных веб-сайтов по нашим любимым технологиям:
Из русскоязычных сайтов — htmlbook.ru, web-standards.ru, habrahabr.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. Это тоже может быть интересно:
Комментарии
Evgeny
Отличная статья, узнал несколько новых моментов на которые стоит обратить внимание. У меня одна проблема, это работа верстальщиком, опыт и знания есть, но пока ни куда не удалось устроиться (говорю про Москву). Может быть кому требуется верстальщик в офис или есть задания для фриланса?
Адъ
Привет!
Стукнись 414443807
Алексей
Спасибо за увлекательную статью, даже добавил ее в закладки. Я и сам только недвно ступил на тот путь, что вы проделали. Причем пришел на фриланс копирайтером, не очень скромно конечно говорить, но стал очень востребованным и довольно дорогим, но изначально стремился к тому чтобы стать именно web-мастером (именно в том понятии, что вы дали выше). И если еще год назад я впадал в ступор от CSS, то сейчас уже верстаю бесплатно шаблоны (деньги нужно брать за качественную работу). Пока для себя, в поиске ошибок помогают друзья — специалисты верстки. Усиленно учусь, хотя фрилансерская лень тоже пытается победить все начинания, пока я выигрываю)
alexriz
Да! Наконец-то ты корректно отозвался о фрилансе и офисной работе. Я очень рад)
Отличная статья, мне понравилась, во многом увидел себя в прошлом. Путь хардкора в редакторе без подсветки, автокомплитов, отбивки и других полезностей, тоже в свое время прошел. Скажу больше первые странички уровня "Hello world", map'ов и iframe, я написал в далекие времена, когда у меня небыло своего компьютера, а только мой верный мобильник SEk610=>w660. Смотрел результат в его же встроенном NetFront. Потом, как и большинство, переболел таким заболеванием, как DW, благо это как краснуха, болеешь лишь раз в жизни. Да там уже был автокомплит, но я подошел к этому с умом. В то время я уже кое-что знал, но путал написание тех или иных свойств. Автокомплит мне помог запомнить свойства именно так как они должны писаться. Писал все равно руками, лишь немного подсматривая в эту подсказку. Потом естественно пересел на нормальные редакторы. Должен отметить, что бы там не говорили, это очень полезный опыт, который спасает в ситуациях, когда нету под руками моего любимого редактора.
psywalker (Автор записи)
Ага) Я ещё хотел написать про слепой метод набора, но решил оставить этот момент:)
Kool
Тьфу, напутал с отправкой)
С определением "Веб-мастер" не согласен, дано описание фронтендера, а веб-мастер — это тот, что на все руки мастер в вебе, занимается чем угодно и кое-как и непонятно где, соответственно. Никто так никого уже не называет.
На счёт фриланса и работы в офисе, если живёшь не в Москве или Питере, то всё становится иначе и печально, не там родился, чтобы вебом заниматься, но если хочется, то можно, конечно. Иногда вижу, что удалённую постоянку предлагают, но что там как уж не знаи и совсем это редкость. Ну а ехать из далёкого Кукуева в Москву или Питер многого стоит.
По поводу поиска первой работы какую-нибудь информацию написать, допустим есть знания, верстал макеты, делал ещё что-то, но нет ни одного действующего сайта, который был бы тобой сделан, а без портфолио ты никому не сдался. Куда смотреть? Расширения для браузеров делать, чтобы показать хоть что-то? Что-то там на Гитхабе показывать? В итоге всё равно не сайт выходит, несколько иные вещи получаются. Ну а делать свой собственный сайт это уж совсем, идею надо, какой-то контент.
psywalker (Автор записи)
На самом деле я долго подбирал подходящий термин, были и другие варианты: "Веб-технолог", "Мастер веба" и т.д. Но в итоге мой выбор пал именно на "Веб-мастера". Дело не в названии, не стоит делать на этом акцент. Суть статьи в другом. Нужно прикладывать много усилий и стараний, чтобы стать настоящим мастером своего дела. А как вы будете при этом называться, это уже второстепенное. Вся сила в знаниях, которые находятся у вас в голове!=)
Да, отчасти вы правы, но не совсем. У удалённого верстальщика есть шанс найти достойную работу. Всё зависит от того, что вы делаете для достижения этой цели. На самом деле со стороны на нас смотрят много людей, среди которых попадаются и достойные заказчики. Трудолюбие и старание не останется незамеченным, уверяю вас. Я вот, например, обычный человек из простой семья и не обладаю хорошими знаниями, однако вы же сейчас пишите комментарий на этом сайте:)
Сергей
Занимаюсь разработкой более 6-ти лет, за плечами более 200 проектов различной сложности и тем не менее нашёл для себя статью полезной и интересной. Большое спасибо за полезный материал и желаю вам творческого и профессионального роста. В общем пишите ещё :)
Лысенко Евгений
Огромное спасибо за эту статью. Имею цель изучить дело верстальщика, а в последствии вебмастера. Тоже вот пробую, эксперементирую, но пока только по мелочи. А вот благодарая таким статьям о собственном пути становления как раз появляется вера в себя. Хотя пока это только на уровне хобби.
Иван
Веб – мастер, мне кажется, немного устаревшее понятие. Те навыки, что вы включили в эту категорию, думаю, лучше объединить под названием «веб – разработчик» или «front — end разработчик».
psywalker (Автор записи)
Чуть выше я дал ответ на этот вопрос:)
Кстати, все эти названия тоже имеют свои отличия и не факт, что какое-то из них точно впишется в статью.
Макс
Спасибо за статью.
Почему вообще не затронуты вопросы сео, юзабилити, конверсии и дизайна? Создается такое впечатление что надо уметь только писать код, и больше ничего. Все остальное сделают другие люди? Может и так, но тогда им придется переделывать часть работы.
По моему мнению, верстальщик должен хоть что-то понимать в этих сферах. Иначе на выходе получаем хоть и функциональный сайт, сделанный "как книжка пишет" однако совсем не годный для своих целей. Именно это, на жаль и можно увидеть на многих сайтах. Если дизайнер, вообще ничего не знает о верстке, он тем самым значительно ухудшает сайт. Если верстальщик, не знает основ СЕО, он верстает сайты негодные для поисковых систем. А часто ли мы видим нормально сделанные ссылки на сайтах? Которые бы нажимались, подсвечивались при наведении и т.п. Практически никогда. Такая простая, удобная вещь как a:active вообще не используется. Почему? Потому что дизайнер об этом вообще не знает, а верстальщик вообще не дизайнер и понятия не имеет о юзабилити и конверсии.
По моему, в современной разработке уже нельзя быть просто дизайнером или просто верстальщиком. Надо реально, на опыте, разбираться в смежных областях. Иначе конечный продукт, хоть и будет вроде правильно создан, на деле не будет выполнять своих функций.
psywalker (Автор записи)
Не стал добавлять SEO, потому что это отдельная большая, запутанная и полная мифов тема, и вообще SEO — зло для веба.
Макс
СЕО бывает разным. Не зря ведь поисковые системы сами дают советы по сео-оптимизации сайтов? Штука в том, что качественно подать контент, без сео, теперь невозможно. Поисковики вводят свои правила в верстку, и если это отрицать, сайт всегда будет где-то в конце выдачи, хоть и с качественным контентом.
Sam Dark
Это ещё один миф, который уже неактуален для поисковика Google, который теперь смотри исключительно на контент и удобство использования.
Макс
Миф? Да, да, сео это сплошной миф и развод на деньги. Как и конверсия, юзабилити и a/b тестирование Это все чушь полнейшая, ни в коем случае этого не используйте и даже ничего не читайте на эти темы! Самое главное это валидность верстки и верстка под ИЕ5!
Sam Dark
http://www.youtube.com/watch?v=k06ezwACeNM
Sam Dark
Я ничего не говорил про a/b и улучшение конверсии и юзабилити. Я исключительно про «продвижение в поисковиках» и «вывод в топ» путём наращивания ссылочной массы.
Макс
А я ничего не говорил про продвижение в поисковиках и вывод в топ, и про ссылочную массу тоже ничего не говорил. И все это как работало, так и дальше работает. Проверено на практике, а не в теории. Вот, почитайте то что говорит сам Гугл, а не какая-то очередная команда проффесионалов с многолетним опытом работы бла бла бла: https://sites.google.com/site/webmasterhelpforum/ru/stati/rukovodstvo-po-poiskovoj-optimizacii-dla-nacinausih-ot-google/rukovodstvo-po-poiskovoi-optimizatsii-dlya-nachinayushchikh-ot-google
Sam Dark
Под «ещё один миф» я имел ввиду, «качественно подать контент, без сео, теперь невозможно.» Как раз сейчас это более, чем возможно. Вы сами привели ссылку на вполне конкретное руководство, которое любой верстальщик осилит, если захочет.
Tatiana
Разве юзабилити это миф и развод? Если не ошибаюсь это логическое и упорядоченое размещение определенных блоков на веб-странице которое дает возможность быстро понять что и где находиться на веб-сайте.
Макс
Это был стеб. Стебался потому что народ вообще не обращает внимание на юзабилити, конверсию и сео.
Tatiana
Согласна на счет юзабилити оно отсутствует очень часто и густо, наткнулась на не плохой сайт дизигнеров, кнопку RSS не нашла за счет множества цветастых элементов а может ее вообще не было, канул в лету.
Sam Dark
Юзабилити не миф и не развод, только занимаются им не SEO-шники, а юзабилитисты.
Hixer
+1. В сети должны быть и цензура и SEO-ограничения на законодательном уровне, иначе ведь не доходит. А жаль.
MrSullen
Чуть меньше года занимаюсь версткой как хобби, и думал, что все, черт побери, проще. Недавно стал заниматься этим больее серьездно и начал искать сайты, посвященные этому делу. Набрел сюда. От всего списка нужных навыков стало страшно… Зато, читая дальше, понял, что у меня разгорается большой интерес. И теперь стремление к изучению всех азов веб-мастера не дает мне покоя. Огромное спасибо за статью! Ваш труд невозможно переоценить!
fromanywhere
А я бы сказал, что список для веб-мастера необоснованно раздут. Давайте мы туда еще фотошоп-люстру-индизайн-флеш впишем? (на самом деле нет).
Мне кажется, логика для html неизменна. Версии отражают лишь добавление справочных знаний, а справочные знания не в полной мере отражают компетентность специалиста. Да, они важны, но не определяют ее всецело.
То же относится и к css, и к выделению ajax в js.
Kool
Да, ФШ надо уметь использовать и Иллюстратор тоже, нарезка, оптимизация изображений, тут правда одним ФШ не обойтись и просто так "сохранить для Веб" не выйдет, если нормально делать.
Вот весьма нужная программа http://x128.ho.ua/color-quantizer.html
Советую почитать блог Чикуенка и книги http://speedupyourwebsite.ru/
zmeika
Я бы действительно добавила владение графическим редактором. И какие-то базовые представления о веб-дизайне. На работе нередко сталкиваюсь с тем что нужно добавить на сайт какой-то новый блок, сделать это быстро и красиво, а доступа к веб-дизайнеру нет потому что он на аутсорсе и в другой стране.
fromanywhere
Понимаете, список можно расширять и дополнять до бесконечности. Знание основ типографики. Знание идей модульной сетки. Знание правил русского языка, наконец.
Просто знание всего этого не гарантирует, что человек — квалифицированный инженер-фронтэндщик.
psywalker (Автор записи)
Графический редактор решил не добавлять, чтобы не быть капитаном очевидность (граф. редактор для нарезки очевидно что нужен, макеты от дизайнеров обычно в PSD приходят)
klierik
Графический редактор решил не добавлять, чтобы не быть капитаном очевидность (граф. редактор для нарезки очевидно что нужен, макеты от дизайнеров обычно в PSD приходят)
у меня перед глазами исходник нарисованый в Индизайне )
второй — просто HTML
порой и JPEG бывает )
то что в статье нету фотошопа — тут его и не надо. как по мне это следующий уровень опыта и знаний, которые себя проявляет в случаях когда нету качественного исходника, и надо уметь воссоздать тот или иной элемент своими силами. а тут уже потребуется больше навыков, нежели просто нарезка. да и нарезать правильно отнюдь не каждый умеет (
Nejik
Спасибо за статью, довольно интересно было почитать.
P.S. сам версткой увлекаюсь года два, работать верстальщиком устроился месяца 4 назад, активно изучаю разные блоги\форумы, ищу сенсея, может кто хочет\может научить) если вдруг кто-то откликнется, nejikrofl @ gmail.com
Serge RNR
Максим,
спасибо за советы!
Имя (обязательно)
Учите еще adobe fireworks, товарищи, проще и дешевле чем photoshop. Очень полезный продукт web-master'a.
mnXucFa
А где его учить? На русском информации практически нет, даже в Сети (по крайней мере, я не нашел). А на английском для новичка это делать тяжело! Хотя бы были основы по-русски, а дальше уже можно и по-аглицки продолжить.
Kool
Да для вёрстки там мало что знать нужно, тупо посидел, потыкал везде — разобрался.
Можно ФШ изучить, по нему-то инфы валом на русском. Схожие инструменты у них имеются, да и просто все продукты Эдоба очень похожи друг на друга всем, чем только можно, в зависимости от задачи продукта.
mnXucFa
Да, я еще раньше догадался, что Fireworks на данный момент можно выучить только по аналогии с Photoshop! Но это еще надо Photoshop выучить! )))
Но вот пока с элементарной нарезкой макета в Fireworks не разобрался. Хотя эта прога мне нравиться больше, чем Фотошоп, однозначно!
Имя (обязательно)
Когда желания нет отговорки всегда найдутся. Балаболит на инглише, не понятно. Визуально подсвечивается каждое его действие, если повторять за ним то все становиться ясно. И так выходит гораздо быстрее, чем тыркать по всем кнопкам самому. http://rutracker.org/forum/viewtopic.php?t=4061256
mnXucFa
Да, Статья очень и очень хорошая! Для себя нашел моменты: действительно, практика и теория — это разные вещи. Изучать было трудно, но выучил. Почитал много книг, и видео (резка макета). Но вот попробовал на практике — как будто не учил ничего! И подзабросил я HTML&CSS… ((( Образно говоря, "надорвался". Сейчас опять начинаю посматривать в эту сторону — все-таки нравиться! ))
Насчет наставника — это просто великолепно! Очень тяжело просто с моральной точки зрения все "поднимать" самому. Вот только где его найти?
psywalker (Автор записи)
Дык ведь я же нашёл! В статье я даже описал, как это произошло.
klierik
Очень тяжело просто с моральной точки зрения все "поднимать" самому.
ой да ну ладно. есть желание — есть цель, остальное не имеет значение.
ну повезло Максу в своё время, но это скорее исключение из правил, а большая часть грызёт и потеет на сим днями и ночами, в то время пока остальные ждут пока к ним снезойжет )
ты хочешь верстать — так верстай ;)
psywalker (Автор записи)
Ну да, можно сказать, что мне повезло, что меня заметил один хороший человечек, не спорю ;) Но согласись, что с каждый днём прогресс от общения с наставником был заметен?)
klierik
прогрес был. скорее понедельно, но был.
psywalker (Автор записи)
Ну да, согласен:)
Владислав
Спасибо за статью Psywalker! Появилась новая пища для ума)Все правильно написал! Как раз такие качества как ответственность, трудолюбие и конечно любовь к своему делу характеризуют настоящих профессионалов.
amelice
Макс, спасибо огромное за познавательную статью!
shapta
Спасибо огромное, придали ясности совсем начинающему!
Tatiana
Большое спасибо Psywalker за статью, вашу биографию также интересно было прочитать. Полезно было для размышлений.
nerv
> Давайте посмотрим на технологии, владение которыми входит в обязанности настоящего веб-мастера:
лично мое понимание веб-мастера — это весь стек технологий, в т.ч. и серверные языки.
— не понятно, почему в списке нет ActionScript;
— почему HTML и CSS разделяются по версиям, а тот же JS нет. К слову, сейчас JS уже нужно знать на уровне 5-ой спецификации ECMA (да и 3-ю никто не отмнял). Готовиться 6-ая;
— PHP (если уж речь зашла о нем). Где версии?
— почему PHP? Ruby, Perl, Python, [Node]JS у нас уже не серверные языки?
> Суть в том, что в качестве начального HTML-редактора я рекомендую самый простой редактор. Да, вы не ослышались, я имел ввиду обычный редактор, без новомодных наворотов, в котором нет ни подсветки кода, ни нумерации строк, короче вообще ничего. Вся прелесть такого редактора в том, что он даёт нам полный контроль над кодом.
даже врагу не посоветовал бы : ) Ну, только если надобно отбить желание к разработке.
psywalker (Автор записи)
Ты не забывай, что речь идёт о клиентской части, а не о серверной. Поэтому тот же PHP я упоминул в самом конце, уже после перечисления всех основных технологий. И то, сказал про его начальный уровень.
Если ребёнку с малых лет ничего не запрещать и всё делать за него, то, как правило он вырастает избалованным и безпомощным. По той же самой причине я предлагаю правильно воспитывать начинающих веб-разработчиков. Чем сложнее в учении, тем легче потом будет в бою. Я придерживаюсь именно такого подхода и не планирую его менять.
GreatRash
> даже врагу не посоветовал бы : ) Ну, только если надобно отбить желание к разработке.
Макс в данном случае на все сто прав. Цель данной статьи помочь научиться начинающему верстальщику. Цель же специализированной программы облегчить разработку. Но на начальном этапе облегчать разработку вредно. Как уже описано в статье, написание кода в обычном блокноте дисциплинирует, заставляет думать над тем что пишешь, помогает запоминать часто используемую разметку. Частенько, приходя на собеседования, мне приходилось писать некий код просто по памяти на бумажке. Частенько я объясняю кому-то что-либо просто на словах, представляя код в голове. Ничему этому специализированный редактор не учит.
Это потом, когда человек уже будет плавать в коде как рыба в воде, можно и нужно задумываться над выбором подходящего редактора.
> не понятно, почему в списке нет ActionScript;
Вероятно, потому, что это довольно специфическая технология, которая косвенно относится к вебу, иначе сюда можно приплести еще Silverlight, Java-апплеты, Unity в конце концов, и еще кучу всего, что работает в браузере в виде плагина.
nerv
начну с: уведомление о комментарии Макса не пришло на мыло, только Rash'а.
> Ты не забывай, что речь идёт о клиентской части, а не о серверной. Поэтому тот же PHP я упоминул в самом конце, уже после перечисления всех основных технологий. И то, сказал про его начальный уровень.
Нет, нет и еще раз нет :) Речь идет о "веб-мастере":
> Давайте посмотрим на технологии, владение которыми входит в обязанности настоящего веб-мастера:
Про редактор.
Далеко ходить не буду: преподаватели Центра "Специалист" рекомендуют начинать с редактора, в котором есть как минимум нумерация строк и подсветка синтаксиса. Просто потому, что это помогает избежать опечаток и разного рода ляпов, проще ориентироваться в коде. И я с ними полностью согласен. Знаю, о чем говорю, т.к. сам начинал с обычного блокнота винды. Этот редактор не позволяет писать больше "Hello world". То, что надо знать правильное написание тегов, стилей и пр. никто не отменял. А вот почему не следует использовать примитивные редакторы обозначенные выше, очевидно — одна опечатка и человека превращается в сканер чб символов от начала файла и до конца. После того, как он проверит весь файл и не найдет опечатку, он не может быть уверен, что ее там нет, т.к. человеку свойственно ошибаться и глаз попросту может замылиться. Подобные редакторы только тормозят прогресс. Вообщем, не надо занимться тем, чем должна заниматься машина.
> что это довольно специфическая технология, которая косвенно относится к вебу
т.е. весь youtube — это косвенно? ) На сегодняшний день Flash никто не отменял.
GreatRash
Ютуб тут вообще не при чем. Флеш изначально создавался не для потокового видео. Просто исторически так сложилось, что, при отсутствии других вменяемых кроссплатформенных решений, чуть ли не основной задачей флеша стало воспроизводство видео. С этой задачей прекрасно бы справились Java-апплеты (но под них нужно ставить целую Java-машину) или, например, QuickTime (не будь он таким закрытым). Заставить юзера установить флеш-плеер оказалось проще, чем заставить его установить QuickTime или Java-машину. Так что да, ютуб — это целиком и полностью продукт побочный, который к флешу относится косвенно. Появись технология Canvas лет на 10 пораньше никто бы и не ассоциировал ютуб с флешом.
По поводу редактора, тема холиварная. Каждый будет говорить со своей колокольни. Предлагаю каждому остаться при своем мнении и предложить читателю решить все для себя самостоятельно.
psywalker (Автор записи)
Очевидно же, что статья не готовит программистов. А потом, в русско-язычных странах значение слова "Веб-мастер" может отличаться от западных. Не нужно придираться к этому. Хочешь подбавить себе ещё технологий? Нет проблем, разве кто запрещает)
Начинать учёбу нужно постепенно, потихонечку, а не сразу брасаться в омут с головой. Изначально я тоже писал в блокноте, но заходил чуть подальше "Hello world". Согласен с Рашидом. Тема достаточно холиварная и спорить об этом можно бесконечно. Я рассказывал свой путь, а не идеальный. Идеальный у каждого свой;)
Svatov
Если хотите повысить эффективность своего обучения все же советую приложить все усилия , чтобы устроиться для начала в офисе, именно офис служит хорошей школой, где проявляются и прокачиваются все ваши навыки и способности. Химик мало, что может нахимичить у себя дома, а вот доступ в лабораторию к дорогостоящему оборудованию и труднодоступным реактивам раскроет больше перспектив перед человеком в дальнейшем. Тоже самое можно спроецировать и на веб, только в меньшей степени. Работая на высоконагруженных проектах вы рано или поздно будете понимать всю эту кухню. А вот, когда вы вдоволь этим насытитесь можно уже запустить либо свой какой-то проект или податься во фриланс работая удаленно, но уже с богатым багажом знаний смежных технологий.
kosunit
Спасибо автору, очень интересная статья. Согласен со Svatov, попробую поискать работу в офисе.
Cypher
Спасибо за статью.
Добавил пару новых блогов в ридер :)
У фриланса, кстати, есть еще один большой плюс: это работа с разными людьми и разными задачами. В маленьких и средних компаниях, как правило, один — два дизайнера. После верстки десятка их работ понимаешь, что раз за разом верстаешь одно и то же только в разной обертке. У бэкэндщиков раз за разом одни и те же требования к верстке. Берешь что-нибудь с фриланса и бам! Что-то новенькое :)
4ega
наверное это смотря где работать ) у меня так наоборот, приходится создавать такие вещи, которые ни то что на фриланс-биржах, на просторах рунета днем с огнем не ссышешь)
klierik
2 Cypher,
скорее всего ты только начинаешь верстать, ибо фриланс не блещит чем-то особенным.
офисные проекты в целом тоже.
другой вариант кога у компании заказчики со всего мира, тут хоть есть где развернутся.
а в остальном современный сайты обожраны скриптами и графикой, вместо того что бы уделять время удобству и простоте.
roma.matusevich
Отличная статья, спасибо. В моем понимании понятие веб-мастер некорректное и для приведенных технологий больше подходит front-end developer.
RusAndreev
Спасибо автору за подробную статью!
Есть желание создавать свои веб-приложения, но без знаний front-end'a на "голом" python'e далеко тоже не уедешь. Придется учиться с азов. Будем руководствоваться советами из статьи.
Кстати, автор услуги наставника-учителя не предоставляет? :)
psywalker (Автор записи)
Кто бы самому автору их представил :)
4ega
Статья мне понравилась)
Только возникли некоторые разногласия, в основном из-за "верстальщик" и "веб-мастер", возможно стоило добавить (именно добавить а не заменить) третью ипостась Front-end developer. Если первые два больше "зеленый новичок" и "мастер на все руки", то фронт-эндер это настоящий джедай, который не просто владеет средствами (языки разметки или программирования), а мыслит на совершенно другом уровне. Одно дело перевести psd макет в html эквивалент, а другое создать ту часть сайта, которая у всех на виду. Тут уже простым знанием html5 и css3 не обойтись =) Тем более что на западе существует именно такая профессия, а это основной ориентир.
От себя хочу добавить, чтобы стать настоящим профи нужно больше чем просто желание, необходимо полностью погрузиться в web и главное получать от этого удовольствие! Если вы не впадаете в экстаз при виде чистой, красивой, валидной, семантической разметки (забудьте слово верстка), то это не ваша работа. Чтобы стать профи, надо быть сумасшедшим =)
Ах да! Забыл добавить, забудьте русский язык! Если вы будете учиться по русским учебникам вы будете отставать на пару лет (в лучшем случае), а также получать низкокачественные переводы (недавно купил книгу Дугласа Кроуфорда на русском, так пришлось скачать англ. версию и свериться с ней, потому что в переводе написано черти-что! )
p.s. в наставники не гожусь, но если что подсказать пишите всегда помогу, чем смогу.
Nick
Статья очень понравилась.
Все таки хотелось бы услышать результаты в денежнем эквеваленте. Если становиться на этот путь, то к чему это выведет. Если не секрет в каком городе живешь и сколько получаешь?
psywalker (Автор записи)
Простите, а вам в какой валюте сообщить? :)
Nick
Говори хоть в чем-то, я както да переведу :)
psywalker (Автор записи)
Хаха, оуукей, напишу отдельный пост, где приведу всю статистику по своей зарплате :)
klierik
Макс, помниш наш разговор 2-3х летней давности о пределах зарабатка в верстке и о том что скоро вёрстка будет автоматизированна.
так вот, пределов заработка нет — я ошибался.
верстка не будет автоматизированна машинами — ты ошибался )
в целом я рад и тому и другому :P
psywalker (Автор записи)
Ага). Но согласись, что верстальщик порой неблагодарная "профессия"? Знаний нужно вагон, а платят копейки(. Поэтому и говорю, здесь надо учиться, учиться и учиться, иначе браться за это дело смысла нет, имхо.
Дмитрий
Мне тоже очень понравилось. Отличный обзор для новичков.
Вопрос: не считаете, что веб-мастеру помимо прочего необходимо обладать базовыми(+/-) навыками MySQL?
psywalker (Автор записи)
Имхо, если хватит сил, то можно, но уже после освоения всех перечисленных технологий в статье. Охх… бедные верстальщики :)
SelenIT
Конкретно MySQL — имхо, необязательно (это почти исключительно серверная сторона, и напрямую, без «прослойки», с базой сейчас почти не работают). Но иметь представление об SQL и реляционных БД вообще — весьма полезно (даже для фронтенда, в этих новых браузерах чего только не понапихано..:–).
scarzie
Уважаемый гуру веб-верстки psywalker , Вы смотрели на свой сайт в IE6 ? На вопрос: "а зачем IE6?", ответ: "а почему бы и нет" ? Это ж ведь Ваш личный сайт, где Вы учите всех — качественной, кроссбраузерной верстки. Это бы сошло только на быструю верстку, для сдачи на фрилансе. Допустим когда я просмотрел Ваш сайт на кроссбраузерность (особенно в чуть более страых версиях разных браузерах), что-то перестал верить что вы женились на css…
SelenIT
Пожалуйста, уточните, что именно вы понимаете под «кроссбраузерностью» применительно к IE6. Попиксельное соответствие? А в IE5? А в NS3 (а почему бы и нет?;–)? Или… всё-таки где-то есть разумный предел, ниже которого достаточно простой читаемости текста?
psywalker (Автор записи)
На счёт "гуру веб-вёрстки" понравился прикол)) поржал, спасибо :)
Не поверите, не смотрел и даже не собираюсь и мало того, никому не советую! Динозавры давноо уже приносят больше убытка и вреда чем пользы и мне очень жаль, что вы и многие другие этого ещё не понимают :(
Извините меня, но имхо, очень глупо мерять опыт верстальщиков по тому, как их работа отображается в IE6. Я сейчас говорю не о себе, а о работе верстальщиков в целом. У взрослых людей приоритеты расставлены совсем в другом порядке и я бы вам советовал побольше читать, смотреть и общаться с умными людьми, чтобы в будущем не писать такие комментарии себе же во благо.
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).
psywalker (Автор записи)
scarzie
Статистика css-live.ru показывает, что количество пользователей IE6-7 равно 0%, а IE8 около 1%. Отсюда возникает вопрос "Ну и нахрена нам нужно верстать под IE6-7 и даже 8?". Какой смысл от этого? Зачем жертвовать доступностью, чистатой кода, скоростью и т.д, ради 0%?
Мало того, к вашему сожалению, огорчю вас. Когда на сайте будет новый дизайн, то вёрстка будет делаться с учётом IE9+, а возможно и IE10+. Для IE8 будет минимальная деградация, абсолютно без заморочек.
Анатолий
За этот ответ я аплодирую стоя.
SelenIT
Есть обоснованное мнение, что подобным, наоборот, страдают
нищебромелкие фирмочки с комплексом Наполеона. А гиганты типа Гугла (и его дочерних/подчиненных контор типа Ютуба), напротив, шлют лесом не только IE6-7, но даже IE8.Лично моя позиция — динозавры должны получать лаконичную и максимально быструю страницу без любых визуальных наворотов, наравне с архаичными мобильниками, а все вкусности должны навешиваться через media queries для тех, кто их понимает.
Sam Dark
Крупные конторы смотрят статистику и действуюи исходя из неё. Если у Amazon 3% пользователей IE6, которые приносят прибыль в год, достаточную для оплаты десяти разработчиков, Amazon будет поддерживать IE6.
4ega
Не сочтите за грубость но может вы еще верстаете с объвлением декларации 4-го HTML (или XHTML) ? Ведь это тоже придает неповторимого опыта при прохождении валидации? :)
Старые технологие будут жить пока мы их поддерживаем, лично я никогда не буду поддерживать ИЕ6 и использовать заведомо устаревшие технологии )
scarzie
Да, конечно использую 4.01 strict. Или Вы считаете что уже можно смело прописывать <!DOCTYPE html> в коммерческих проэктах?
to All, кстати, вот реальная статистика браузера IE6 http://www.ie6countdown.com/ !!!
Svatov
Мне вас искренне жаль, если вы до сих пор верстаете под ие6, вы тем самым не только делаете хуже себе, а и другим людям, которым потом приходится тратить время объясняя клиентам, почему в наше время уже не следует верстать под устаревшие браузеры. Допустим в данный момент верстаю сайт, где минимальные требования кроссбраузерности ие8, не говоря уже об ие6.
4ega
scarzie
А давайте в городе на дорогах поставим корыта с водой и сено для лошадей вдруг с деревни кто приедет а коня поставить то негде!?
а вообще потенциальные посетители данного сайта должны использовать ие только для того чтобы скачать и установить хром или фф =)
klierik
А случаем в Нетскейпе не пробывал посмотреть? там то как?
2012 на дворе — ИЕ8+ *(и то восьмерку по блату так сказать)
Tatiana
4ega если все таки понадобиться подсказка куда можно постучаться?
4ega
newboon(собако)ya.ru
Tatiana
Ок Сп
nerv
А IE4 идет в комплекте к Windows 98. Дальше что? Вы пробовали открывать свои сайты в IE4? Думаете Win98 вымер? Ошибаетесь.
О каком опыте Вы говорите? Видимо о головной боли от исправления чужих (microsoft) ошибок.
На заборе тоже пишут, но не будем об этом :)
Не вижу ссылок.
школьник что ли? Прыгни с моста. "На вопрос: "зачем", ответ: "а почему бы и нет"".
Давай ссылки. Посмотрим, как твои творения ведут себя в Netscape Navigator 1.0. Продемонстрируешь всем свой "огромнейший и неповторимый опыт".
scarzie
nerv,
Не будем сравнивать Windows 98, и XP . Где сейчас можно встретить 98? Почти нигде (если вообще можно). Где сейчас можно встретить Windows XP? В 90% офисных работников СНГ. А с IE6-7 на борту? В 40% тех офисных работников XP.
Опыта дает много, допустим если верстка работает в 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, кроме как для выпендрежа.
Мы уже перешли на ты? Выше писалось о разумном пределе, я считаю это IE6-7+ .
Что-то мне всегда казалось что Вы (psywalker) позиционируете себя как не чайник, и даже не на средний уровень, а скорее наоборот, на человека, который еще может других чему-то научить. Повторю еще раз, ничем Вас обидеть не хотел.
Это скорее всего из-за тематики Вашего сайта. Подумал, согласен, Вашему сайту, а также личным блогам — возможно и не нужна поддержка столь старых браузеров. Но для сайтов-визиток, фирм , интернет-магазинов, я считаю просто необходимо делать сайт доступным всем пользователям сети, а не лишь тем кто будет обладать последним хромом, или 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 , мои сайты будут их поддерживать (не во всей красе ествественно, но на уровне работоспособности точно). А то так из-за браузера можно и клиента потерять.
Макс
Просто верстать под ИЕ6 очень сложно. А новоявленные верстальщики этого делать вообще не умеют. Вот они и будут находить миллион причин почему этого не стоит делать, какие они умные а все остальные глупые, переходить на личности и т.п.
И статистика под ИЕ6 для разных сайтов бывает очень разной. На некоторых сайтах до сих пор сидит около 5% пользователей с ИЕ6. В основном это старшие люди, которым все новые технологии побоку. Так что мне, просто забить на 5% посетителей среди которых вполне могут быть ваши родители и бабушки с дедушками?
И зря говорят что ИЕ6 тормозит сейчас веб. Веб он тормозил раньше, сейчас это в прошлом. На данный момент есть невероятное количество javascript которые добавляют новые возможности html5 и css3 в ИЕ6.
SelenIT
Нет таких, не обманывайте себя, чудес не бывает. Все эти скрипты добавляют лишь ограниченную имитацию возможностей HTML5 и (особенно) CSS3 ценой кучи глюков и тормозов. А поскольку старые IE и так живут, как правило, на старом же железе, юзер, скорее всего, тупо не дождется, пока его несчастный браузер отвиснет после энной минуты инициализации этих красивостей, плюнет и уйдет с сайта, так и не заполнив ни единой формы заказа. Т.е. такая горе-поддержка старья с практической точки зрения немногим лучше их полного игнора. В отличие от аккуратной «изящной деградации», позволяющей юзеру, пусть не супер-пупер-мегаудобно и гламурно, зато быстро, без лишних красивых слов и розовых соплей, перейти-таки к этой форме заказа и заполнить ее. Особенно как раз людям, далеким от технологий и не способным оценить их (иначе они не сидели бы на старых IE), которым нелегко менять старые привычки.
Возможно, этим и отличаются мастеров от «мастеров»: вторые тратят время на героическое и порой поистине виртуозное преодоление трудностей, которых вполне можно было бы избежать, а первые просто решают задачи, зарабатывая деньги и помогая заказчику зарабатывать их. И тем самым экономят время на изучение действительно нового и полезного.
Сама философия HTML5 призывает нас решать реальные задачи доступными средствами, не отвлекаясь на пускай прикольные, но по факту мало- или вообще бесполезные чисто вспомогательные штуковины.
Макс
Я постоянно использую IE9.js и иногда PIE. Никаких глюков, тормозов и прочаяя не наблюдаю уже более чем на 20 сверстаных с их помощью сайтах. Я говорю из личного опыта, а не теории. JS добавляют те возможности, которые поддерживаются другими браузерами но не поддерживаются старыми ИЕ и работают только на старых ИЕ. Также IE9.js устраняет кучу ошибок старых ИЕ, и значительно облегчает верстку. Это реальный опыт меня как верстальщика, а не теоретика. Если руки ростут из правильного места, то js работает как надо. Если у Вас есть конкретные указания на глюки IE9.js или PIE укажите на них, иначе это пустая болтовня очередного великого специалиста.
Вы правильно написали: некоторые просто зарабатывают деньги, совершенно не понимая того что они делают, втюхивая клиенту некачественный продукт и беря за это высокую оплату. А другие постоянно улучшают свои знания и стараются сделать продукт качественным. Обычно, после таких зарабатывателей приходится очень много всего переделывать. И клиенты обычно уходят очень быстро от таких вот зарабатывателей к нормальным веб-мастерам.
В теме кстати вообще не рассмотрена проблема некачественной верстки. А ее просто невероятное количество. Все эти школьники которые кричат о командах великих специалистов с большим опытом уже реально задолбали.
SelenIT
Я как раз писал про тех, кто зарабатывает деньги, понимая не только то, что делает, но и для чего.
На простых статичных страничках с небольшим кол-вом элементов, да, PIE и подобные годами отлаживаемые решения могут быть приемлемыми (так что для сайтов-визиток, небольших промо и т.п. дешевой рутины они вполне годятся и действительно облегчают жизнь). Но если с ними не всплыло ни одного бага на большом высокодинамичном (с постоянным аяксовым добавлением элементов и т.п.) проекте — это говорит не о немерянной крутизне разработчика, а лишь о недостаточно тщательном тестировании. Увы, потому что чудес не бывает…
Макс
Попробуйте поюзайте их в деле. Думаю понравиться и не сможете отказаться до тех пор пока ИЕ не вымрет как динозавры.
SelenIT
Спасибо за совет. Если нужда заставит делать нехитрую «визитку» для глухого к доводам разума заказчика, упирающегося рогом в круглые уголки с тенями начиная от IE5.5 во что бы то ни стало — воспользуюсь обязательно.
Но всё же, с какими заказчиками выгоднее иметь дело — с зацикленными на том, чтобы навязать 5–7% аудитории то, что ей непривычно и не нужно (вместо скорости и доступности), или с теми, кто рассчитывает получить отдачу и от >12% пользователей «Оперы Мини»? Конечно, где-то тут рядом упомянутый Амазон может себе позволить и одно, и другое, да еще и свои планшеты выпускать — но для этого ему сперва надо было стать Амазоном (и кстати, тени на нем сделаны картинками:–).