Что нужно знать веб разработчику. Особенности профессии и ключевые обязанности веб-дизайнера

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

В мире более 11 миллионов веб-разработчиков разного профиля и уровня. Однако, по данным CMS Magazine и «Рейтинга Рунета», 62% компаний и веб-студий остро ощущают нехватку кадров. Вот как они ответили на вопрос о дефиците сотрудников в сфере веб-разработки.

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

Причин несколько:

• 15,9% работодателей считают, что уровень образования потенциальных сотрудников не соответствует требованиям рынка (нет достойного портфолио, отсутствует опыт командной работы).
• 15% компаний полагают, что на рынке в принципе мало квалифицированных веб-программистов, способных разрабатывать сложные проекты (особенно в регионах).
• 7,3% компаний замечают, что многие специалисты веб-разработки предпочитают фриланс работе в штате.
• 6,3% веб-студий полагают, что сотрудничества не получается из-за несовпадения зарплатных ожиданий соискателей с возможностями работодателей.

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

Взгляните, например, вот на этот график «Рейтинга Рунета».

Из статьи «Рынок веб-разработки остаётся рынком „ручного“ труда»

Разработчики-фрилансеры занимают довольно крупную нишу в дорогих проектах. Им достаётся 6% проектов стоимостью от 100 до 300 тысяч рублей и 8,3% проектов дороже 300 тысяч рублей.

Требуется веб-разработчик

Убедиться в востребованности профессии веб-программиста легко. Достаточно зайти на любой онлайн-сервис по трудоустройству.

Только в Москве почти полторы тысячи вакансий. Среди IT-компаний и веб-студий за хороших разработчиков идёт нешуточная борьба.

28,4% компаний ищут сотрудников с помощью job-ресурсов, 21,4% - через социальные сети и по рекомендациям, 16,2% признают достаточно эффективным раздел с вакансиями на собственном сайте и 12,7% хантят сотрудников «со школьной скамьи», то есть приглашают на стажировку талантливых студентов, отслеживают медалистов и олимпиадников, устраивают конкурсы для студентов и так далее.

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

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

Владимир Завертайлов, основатель и руководитель интернет-студии «Сибирикс»

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

Квалификация

Под веб-разработчиком работодатель обычно понимает универсального специалиста full-stack.

Full-stack состоит из front-end- и back-end-разработки. Разработчики front-end обеспечивают создание внешнего вида сайта (портала, проекта). Back-end-разработка включает в себя теневую сторону ресурса, то, чего не видно пользователю, изнанку сайта. Но, независимо от специализации, веб-программист должен знать полный цикл. Без этого невозможно представить, как тот кусок задачи, который ты реализуешь, будет интегрироваться с общим проектом.

На сегодняшний день стандартом веб-разработки (full-stack) является следующий комплекс знаний.

Вёрстка + браузерный язык программирования + серверный язык + язык для работы с базами данных + фреймворк(и).

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

HTML / CSS . Это основы создания сайтов. Обучение идёт через практику: студенты разрабатывают сайт интернет-магазина, изучая параллельно свойства и возможности HTML / CSS.

JavaScript - первый и второй уровни. Этот язык программирования призван сделать сайт живым: он взаимодействует с посетителем ресурса, реагирует на движения курсора, клики мыши и нажатия на клавиши. В первом курсе по JavaScript даются азы, во втором полученные знания закрепляются.

Основы баз данных . Это 20 интенсивных видеоуроков о системах хранения и обработки данных, для доступа к которым используется язык SQL (Structured Query Language).

PHP - первый и второй уровни. Этот язык программирования входит в тройку самых популярных. На первом уровне студенты изучают принципы объектно-ориентированного программирования и учатся правильно использовать основные конструкции языка. Второй уровень позволяет отточить владение PHP до виртуозности.

HTML5 и CSS3 . Эта связка даёт возможность верстать макеты, создавать и редактировать статические сайты. На курсе студенты проходят все этапы создания рекламного сайта для коммерческой организации.

AngularJS / D3.js . Здесь студенты учатся работать с D3.js в симбиозе с мощнейшим фреймворком построения одностраничных веб-приложений Angular.js.

Yii framework . Это один из самых популярных и востребованных фреймворков на PHP. На лекциях рассматривается базовый и продвинутый шаблоны приложения и разрабатывается аналог программы Evernote. В качестве домашнего задания студентам предлагается создать программу-календарь, которую впоследствии можно использовать в портфолио.

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

Сливки

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

По данным агентства «Тэглайн», веб-программисты получают в 1,8 раза большую зарплату, чем среднестатистический житель России.

Средняя зарплата веб-разработчика по стране - 60 310 рублей, в Москве - 75 270 рублей, в регионах - 46 790 рублей.

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

Желание стать web-программистом возникает не на пустом месте. Многие искушенные интернет-пользователи знают, либо подозревают, что в Интернете крутятся большие деньги. Если взглянуть на двадцатку Forbes самых богатых людей в мире за 2015 год, то можно увидеть, что в ней аж пять представителей IT-индустрии: Билл Гейтс ($79,2 млрд), Ларри Эллисон ($54,3 млрд), Марк Цукерберг ($33,4 млрд), Ларри Пейдж ($29,7 млрд) и Сергей Брин ($29,2 млрд). Все эти люди имеют непосредственное отношение к программированию. Можно сделать простой вывод — умея программировать, можно неплохо заработать. Естественно, необходимо быть профессионалом своего дела.

С чего начать?

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

• HTML — (от английского HyperText Markup Language) язык разметки гипертекста. Сразу заметим, что HTML не является языком программирования. Видеокурс по HTML можно скачать в разделе
• CSS — (от английского Cascading Style Sheets) каскадные таблицы стилей. CSS — это формальный язык описания внешнего вида документа, написанного с использованием языка разметки, т.е. HTML. Видеокурс по CSS также можно скачать в разделе

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

Какой язык изучать?

Если с HTML и CSS все понятно, то с выбором языка веб-программирования дело обстоит сложнее. Дело в том, что подобных языков множество и их можно разделить на две группы:

Клиентские — выполняются в браузере (Google Chrome, Opera, Firefox и т.д.) пользователя;

Серверные — выполняются на стороне сервера, т.е. как правило на удаленном компьютере, на котором расположен сайт.

Подобно разделению языков веб-программирования, можно разделить и веб-разработчиков на две группы:

Front-end разработчики;

Back-end разработчики.

Front-end разработчик занимается «приблудами» которые видят посетителя сайта, например выпадающие меню, всплывающие окна и т.д. Если вы планируете стать веб-разработчиком именно клиентской части, то кроме HTML и CSS вам необходимо изучать язык web-программирования JavaScript. Код написанный на JavaScript может выполняться в любом браузере установленном на любом устройстве. Это достигается тем, что все современные браузере имеют в свое составе интерпретатор JavaScript. Теоретически, front-end программисту нет особой нужды изучать серверные языки программирования, однако профессионалы их знают. Это необходимо для понимания взаимодействия клиентской и серверной части, что может быть критичным при работе над серьезными веб-проектами.

Back-end разработчик занимается программированием серверной части, без которой невозможно существования динамического сайта, например сайта работающего на движке WordPress или Joomla. Посетители сайта, как правило, даже не подозревают о её существовании. Именно back-end программист отвечает за то, чтобы пользователь мог зарегистрироваться на сайте, а его данные сохранились в базе данных. Back-end программист должен владеть хотя бы одним серверным языком программирования, например PHP.

Если вы являетесь поклонником бесплатного движка WordPress и планируете создавать на нём сайты и плагины в одиночку, то следует изучить как JavaScript, так и PHP. Не обойтись и без знания MySQL — системы управления базами данных. Именно в MySQL храниться «самая ценная» информация, такая как тексты статей, настройки движка, комментарии пользователей и т.д.

Книги по веб-программированию для чайников

Посмотрев продукцию магазина OZON, мы подобрали несколько книг по JavaScript, PHP и MySQL которые будут понятны начинающим веб-программистам. Книги написаны известными авторами, такими как: Крис Минник, Ева Холланд, Эрик Фримен, Элизабет Робсон, Никхил Абрахам, Бретт Маклафлин.

Среда разработки

WebStorm — среда разработки на JavaScript, CSS и HTML (front-end разработки). Этот вариант подойдет тем, кто пока решил не заморачиваться с изучением серверных языков программирования, а хочет опробовать себя в разработке только клиентской части сайта.

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

Важно! Продукты компании JetBrains кросс-платформенные, т.е. могут устанавливаться на компьютеры работающие под управление различных операционных систем ((Windows, Mac OS X, Linux).

Интерфейс интегрированной среды разработки PhpStorm

Заключение

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

Если вам интересны статьи посвященные программированию, то оставляйте комментарии и предлагайте свои темы.

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

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

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

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

Веб-дизайнер должен уметь найти золотую середину между «удобно», «красиво» и «то, как видит это заказчик». А это довольно-таки непростая задача.

Сегодня эта профессия популярна не только благодаря большому количеству веб-страниц в интернете, но и за счет возможности работать удаленно. Представьте, что вы попиваете кофеек в каком-нибудь лондонском ресторане, одновременно реализуя проект для Валерия Леонидовича из Красноярска, а завтра вас уже ждет заказ из какой-нибудь Алматы, который можно выполнить на отдыхе в Берлине. Круто, не правда ли?

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

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

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

Что входит в обязанности веб-дизайнера?

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

разработка дизайна сайтов и отдельных веб-страниц, решающих конкретные задачи клиентов;

проектирование макетов будущих веб-сайтов либо отдельных веб-страниц;

создание всевозможных иконок и прочих графических изображений для сайтов.

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

разработка дизайна для продукции полиграфического характера (визитки, каталоги и т. п.);

создание логотипов, фирменного стиля брендов и компаний;

разработка flash-анимации;

выполнение верстки сайтов;

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

настройка и персонализация CMS.

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

Какие существуют требования к веб-дизайнеру?

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

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

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

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

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

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

Что должен знать веб-дизайнер?

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

высокий уровень знаний графических редакторов Photoshop, CorelDraw, Illustrator (чем шире спектр, тем больше возможностей);

умение работать с Flash-анимацией;

владение программами для верстки, а также HTML и CSS на базовом уровне.

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

знать основные принципы юзабилити сайтов;

уметь разрабатывать и визуализировать различные пользовательские интерфейсы;

понимать особенности функционирования Android и iOS;

иметь навыки работы с инфографикой.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

По словам Сорора, он занимался написанием кода в течение 20 лет. Свою инструкцию он разделил на несколько разделов исходя из целей обучения - для базового изучения языков программирования и получения углубленных знаний по отдельным областям разработки.

«Я решил научиться программированию. Мне нравится веб, но я не знаю, с чего начать»

Как и в любой другой дисциплине, изучение программирования нужно начать с основ всех областей веб-разработки - часто это называют «full stack». «Это поможет определить область, в которой вам интереснее обучаться, и даст базовые знания для старта», - пишет Сорор.

Основы HTML

Разработчик советует начать с изучения основ HTML. «Начав с этого вы освоите разработку пользовательских интерфейсов и взаимодействие с ними. Кроме того, вы сразу увидите результат работы вашего кода», - отмечает преподаватель.

«Я знаю основы HTML» Основы JavaScript

«JavaScript - язык веба, все популярные браузеры (Chrome, Firefox, Safari, IE) имеют встроенную поддержку JavaScript. Каждый сайт или веб-приложение, которым вы пользуетесь, наверняка имеет большое количество JavaScript-кода внутри. Кроме того: язык сейчас становится популярным и на других платформах - например, серверах, рабочих столах и устройствах».

«Я знаю основы JavaScript и HTML» CSS

Далее Сорор предлагает перейти к изучению CSS для настройки внешнего вида HTML-элементов. Для этого можно воспользоваться бесплатным учебником от Mozilla для обучения основам и сайтом CSS-Tricks для решения основных проблем.

Бэкенд

«К этому моменты вы получили знания для так называемой "фронтэнд-разработки". Теперь можно переключиться на "бэкенд". Это код, которые работает на сервере», - пишет Сорор. - Существует множество бэкенд-языков, но так как вы уже знакомы с JavaScript, я рекомендую изучить Node JS (программная платформа - прим. ред.). В дополнение к Node JS можно изучить Express и Mongo DB».

Express - библиотека, которая позволяет облегчить взаимодействие Node JS с веб-сервером. Mongo DB - база данных для хранения и получения информации.

jQuery JS-фреймворки

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

React JS

React был разработан Facebook и работает с архитектурой Flux . Это JavaScript-библиотека для создания интерфейсов. Недавно React обошел по популярности другую распространенную библиотеку Angular, поэтому лучше начать изучение фреймворков именно с него, отмечает Сорор. Бесплатный курс для изучения React.

Angular и

Angular - разработка Google. Фреймворк по-прежнему популярен среди разработчиков. После анонса Angular Google решил полностью переписать фреймворк и запустил Angular 2, поэтому получилось две совершенно разных разработки с одинаковым названием.

Фреймворк Angular 1 можно изучить бесплатно на Code School . Познакомиться с Angular 2 можно при помощи бесплатных видео .

Ember JS

Фреймворк не такой мощный, как разработки Google и Facebook, однако он набирает популярность среди разработчиков. Официальная документация Ember JS.

«Я хочу стать бэкенд-разработчиком»

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

Языки программирования, обозначенные зеленой рамкой, - те, на которых стоит сфокусировать своё внимание, считает Сорор.

Java

Очень популярный язык программирования, разработанный компанией Sun Microsystems (сейчас принадлежит Oracle). Java используется для разработки приложений для Android. Его также можно использовать для создания компьютерных и веб-приложений.

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

C#

Язык разработан компанией Microsoft как альтернатива Java. Как и Java, C# является объектно-ориентированным языком программирования и может использоваться не только для разработки веб-приложений, но и программ для настольных операционных систем. Бесплатный курс по изучению C# от Microsoft Virtual Academy.

Python

За Python нет никакого крупного бренда. Однако этот язык позволяет вести быструю разработку. Сайт с бесплатными уроками для изучения Python.

Ruby

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

Лучшее место для изучения Ruby - RubyMonk , считает разработчик.

Практика

Перед выполнением практических задач Сорор рекомендует сразу создать профиль на сайте GitHub - онлайн-репозитории для хранения, управления и публикации кода. Знакомство с платформой можно начать с инструкции “Hello World" или интерактивного курса .

Начать разработку можно с создания собственного блога (инструкция для программирования блога на React и Node) или календаря (инструкция для программирования календаря на C# и.Net).

Бесплатные уроки можно найти и на Free Code Camp :

• Таймер «Помодоро» (фронтэнд).
• Трейдинг-клуб (фулстэк).

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

Текст подготовлен на основе вебинара с участием Михаила Овчинникова из компании Badoo.

Запись вебинара

Экономия времени

Ситуация на рынке

Рассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:

1. Frontend - самая «громкая» и быстроразвивающаяся отрасль, в которой постоянно меняются тренды. Опирается на язык программирования JavaScript и его фреймворки, такие как Angular.js, React.js, Vue.js и другие, а также язык разметки гипертекста HTML и таблицы стилей CSS.

2. Web-development, а именно backend-разработка с использованием различных языков, например, PHP, Ruby и Python.

3. Android/iOS-development - разработка под мобильные устройства на языках Java, Swift, Objective-C, C# (Xamarin), JavaScript (React Native) и других.

4. .NET-development - разработка как десктопных приложений под операционную систему Windows на языке C#, так и серверных программ, в том числе веб-сайтов, с использованием технологии ASP.NET.

5. Java-development - разработка кросс-платформенных приложений на языке Java, а также крупных высокопроизводительных систем с использованием технологии Java EE. Ее выбирают, когда нужны надежность, масштабируемость и гибкость.

6. Game development - разработка игр под различные платформы.

7. UI/UX - проектирование пользовательских интерфейсов.

8. QA - обеспечение качества программного обеспечения и его тестирование.

9. Embedded development - разработка программного обеспечения под «железо»: автомобили, бытовую технику и различные устройства с использованием низкоуровневых языков, таких как C и C++ со вставками ассемблера соответствующего процессора.

Почему стоит идти в веб

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

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

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

Сколько зарабатывает веб-разработчик

Изучив сайты поиска работы, можно увидеть весь диапазон зарплат веб-разработчиков. Новичок, у которого меньше полугода опыта, может зарабатывать от30 000 до60 000 рублей. Средний специалист с хорошим стажем получает80 000–150000 рублей. Доход профессионала составляет150 000–250000 рублей. Вдобавок, многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.

Зарплаты frontend-разработчика от сервиса зарплат компании «Мой круг » на сайте habrahabr.ru (конец2017 года)

Что нужно знать веб-разработчику

Про веб-разработку и программирование бытует множество слухов и стереотипов. Мы поговорим в том числе и о них.

Что веб-разработчику не требуется:

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

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

Учиться несколько лет и заканчивать институт, чтобы освоить базовую веб-разработку. На деле ее освоение займет два-три месяца обучения.

Что понадобится для успешного старта:

Изучить базовые технологии создания сайтов - HTML и CSS - и понять принципы построения структуры сайтов. На это уйдет несколько недель.

Освоить сопутствующие технологии: редакторы кода либо IDE (интегрированные среды разработки), например Notepad++, Sublime Text, Brackets, WebStorm, PHPStorm. Эти инструменты сильно ускорят процесс разработки.

Знать о существовании фреймворков и готовых решений, которые упрощают и улучшают код. Например, для frontend-разработчика это фреймворк для верстки Bootstrap, библиотека языка JavaScript - JQuery, с помощью которой написано множество других полезных и нужных библиотек, и Simfony - PHP-фреймворк общего назначения, который облегчает взаимодействие с базой данных, задачи формирования HTML-кода и задачи принятия данных из запроса.

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

Структура веб-сайта

Для начала давайте выясним что такое сайт и из чего он состоит.

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

Например, если бы наш сайт имел домен mysite123.com, то и папка, в которой он лежит, называлась бы так же и имела примерно такую структуру:

Структура каталога сайта

Когда в адресной строке браузера мы вводим адрес, например, yandex.ru, браузер обращается к серверу соответствующего сайта. Это то, с чего начинается взаимодействие с любой страницей в сети.

В ответ на этот запрос на сервере yandex.ru начинают работать backend-технологии, например, PHP и MySQL. Они делают свою «серверную магию» и в ответ на запрос «покажи мне главную страницу» отдают обратно браузеру искомую страницу в виде HTML, CSS и JavaScript-кода. Браузер умеет распознавать этот код и в результате выводит в своем окне красивую, работающую «Главную».

Ресурсы и инструменты для веб-разработки

Для качественного и продуктивного освоения веб-разработки познакомимся с наиболее популярными источниками информации, а также некоторыми инструментами.

HTML и CSS:

• htmlbook.ru - самоучитель по HTML4, а также введение в HTML5, самоучитель CSS, введение в CSS3;
• htmlacademy.ru - интерактивный курс по HTML5, основы CSS, множество бесплатных уроков;
• webref.ru - самоучитель HTML, основы CSS, блочная модель CSS, текст в CSS, позиционирование в CSS, продвинутый CSS;
• «Погружение в HTML5» Марка Пилгрима.

JavaScript:

• learn.javascript.ru - самый современный самоучитель по JavaScript;
• Дэвида Флэнагана.

После освоения этих технологий рекомендуется также изучить JQuery - самую популярную библиотеку JavaScript. В дальнейшем стоит познакомиться и с такими полезными библиотеками, как Slick, Owl Carousel, Magniffic Popup, Velosity.js, Tree.js и другими.

Для ускорения написания кода и удобной работы с ним советуем использовать текстовые редакторы, такие как Sublime Text с плагином Emmet, редактором Notepad++, Brackets, IDE WEBStorm, PHPStorm и другими полезными инструментами.

Для ускорения написания CSS-кода полезно будет научиться работать с препроцессорами CSS, такими как Scss, Sass, Less.

Создаем простую веб-страницу

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

Воспользуемся текстовым редактором Sublime Text3 и создадим в нем новый файл index.html.

Файл index.html

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

Добавим несколько элементов. Для каждого из них есть свой тег. Для начала создадим заголовок и дополним его текстом и кнопкой.

Для добавления заголовка используется тег , для параграфа текста - тег

А для кнопки - тег . Поместим эти элементы внутри блока с тегом .

Моя первая страница

Это моя первая страница

Программирование - это просто!

Показать

Теперь обновим страницу. Как видите, элементы появились в окне браузера.

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

Для изменения стиля элементов необходимо применить к ним CSS-правила. CSS-правила можно записать внутри блока с тегом .

Нужный нам код выглядит так:

h1 {color: violet;}

p {font-size: 30px; }

button {background-color: yellow;}

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

Отлично. Теперь установим фон, а кнопку сделаем более заметной. Добавим следующие правила для кнопки и фона:

background-color: orange;

font-size: 30px;

body {background-color: lightgray;}

Пора дополнить все это великолепие картинкой. Добавим к существующим элементам тег , который и отвечает за отображение изображений на странице. Он включает такой атрибут, как src (от англ. source - источник), который указывает на путь к картинке. Наша картинка лежит на диске D.

Так можно создавать множество элементов на странице, а затем с помощью CSS-правил придавать им нужные вид и расположение.

Давайте сделаем так, чтобы при наведении курсора на кнопку она становилась белой, а текст внутри нее - оранжевым. За состояние элемента при наведении на него курсора в CSS отвечает псевдокласс hover. Добавим несколько правил для нашей кнопки и после этого попробуем навести на нее курсор.

button:hover {background-color: white; color: orange;}

Все сработало! Кнопка поменяла свой вид.

Теперь попробуем сделать нашу картинку по умолчанию невидимой и устроим все так, чтобы она появлялась только по нажатию на кнопку. За видимость объектов отвечает CSS-свойство visibility. Установим ему значение hidden.

img {visibility: hidden;}

Как видите, картинка исчезла.

Вернем нашу картинку и нажмем на кнопку «Показать». Ничего не произошло? Все потому, что мы еще не запрограммировали кнопку на выполнение действия. Здесь мы уже можем применить JavaScript.

Зачем нужен JavaScript

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

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

Чтобы выполнить действие только с определенным элементом, в нашем случае с картинкой, зададим ей уникальный идентификатор с произвольным именем, например, cat.

После чего создадим с помощью JavaScript функцию, которая будет возвращать картинку на экран, и дадим ей имя show. Вставим этот кусок кода в раздел .

function show(){ document.getElementById("cat").style.visibility="visible";}

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

Показать

Теперь конструкция document.getElementById("cat") выполняет обращение к элементу по идентификатору cat, который прикреплен к нашей картинке. Укажем, что обращаемся к стилю элемента, а конкретно - к свойству visibility, и устанавливаем через знак «=» значение visible в кавычках.

Если вы хотите, чтобы при нажатии на кнопку менялся и фон страницы, добавьте в функцию и этот код:

document.body.style.background = "green";

Как видите, и правда просто.

Вместо того чтобы вручную менять свойства объектов в коде, JavaScript это сделал за нас.

Как сайты хранят данные

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

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

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

Существует много других языков для этих целей, но PHP в связке с MySQL - системой управления базой данных (СУБД) - считаются наиболее простым вариантом для освоения новичком.

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

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

Заключение

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

Знание языков.

Умение пользоваться готовыми решениями, библиотеками и фреймворками.

Самопрезентация и работа с заказчиком.

Наличие хорошего портфолио и резюме.

Умение вникать в требования заказчика и работодателя.

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