Веб-разработчик: чем занимается и как им стать

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

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

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

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

Они создают сайты и веб-приложения, такие как:

  • Skillbox (наш любимый);
  • Google;
  • Pornhub;
  • «Яндекс»;
  • Twitter;
  • Facebook;
  • «Одноклассники»;
  • YouTube;
  • Habr и многие другие.

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

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

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

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

Какие бывают веб-разработчики

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

Backend

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

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

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

Схема работы backend.

Занимаются этим backend-разработчики. Они пишут сайты на PHP, Ruby, Python, ASP.NET и других языках, чтобы мы могли:

  • купить что-нибудь в интернет-магазине;
  • посмотреть ролик;
  • оставить комментарий;
  • написать пост;
  • лайкнуть запись;
  • послушать музыку;
  • устроить онлайн-трансляцию и многое другое.

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

Frontend

Frontend — это то, что мы видим: текст, картинки, кнопки, формы и так далее. Frontend-разработчик использует языки HTML, CSS и JavaScript, чтобы дать пользователю возможность взаимодействовать с сайтом:

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

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

Fullstack

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

Как стать веб-разработчиком

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

Разобраться в этих языках можно за день. И тогда вы сможете сверстать несколько средненьких страниц. Первое время у вас, скорее всего, будет получаться не очень умело, но потом вы научитесь делать это быстро и качественно. Чтобы ускорить процесс, скачайте в интернете PSD-макеты сайтов и попробуйте собрать их на HTML и CSS.

На HTML вы можете создать такое окно:

<div class='window' id='window__01' draggable='true'>

<div class='window__title'>Окно</div>

<div class='window__content'>

          <p>Какой-нибудь текст, который отобразится в окне.</p>

          <center><button id='window__close' class='window__button'>Ок</button></center>

</div>

</div>

Выглядеть оно будет вот так:

Сложно назвать это окном. Теперь попробуем добавить вот такой CSS:

.window {

position:fixed;

top:150px;

left:150px;

background:#fefefe;

width:500px;

height:250px;

font-family:arial;

border:2px solid #000;

font-size:26px;

box-shadow:0 0 10px rgba(0,0,0,0.5);

}

.window__title {

background:#333;

text-align:center;

padding:15px;

color:#fff;

cursor:move;

}

.window__content {

padding:5px;

}

.window__button {

padding:5px 20px;

color:#fff;

background:#333;

border:0;

font-size:20px;

cursor:pointer;

}

Внешний вид кардинально изменится:

Уже достаточно красиво, хотя занимает совсем немного строк, а на написание уходит пара минут.

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

Вот, например, как реализовать перетаскивание окна из примера выше:

var wind = document.getElementById("window__01");

var mouseX, mouseY;

function dragStart(e) {

mouseX = (e.pageX - this.offsetLeft);

mouseY = (e.pageY - this.offsetTop);

}

function dragStop(e) {

this.style.top = (e.pageY - mouseY) + 'px';

this.style.left = (e.pageX - mouseX) + 'px';

}

wind.ondragstart = dragStart;

wind.ondragend = dragStop

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

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

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

Если вам интересно заниматься именно внешним видом, то продолжайте идти в этом направлении. Даже HTML нужно долго изучать, чтобы полностью им овладеть. Не говоря уже о CSS, в котором нужно овладеть позиционированием, наследованием, адаптивной версткой и многим другим. Совершенствуйтесь в этом, чтобы стать frontend-разработчиком и делать такие штуки:

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

Дальше вам понадобится любой язык запросов — MySQL, PostgreSQL, MSSQL и тому подобные. Они помогут получать и вносить информацию в базу данных. Это очень полезно, потому что позволяет легко оптимизировать работу сайта, особенно если на нем должно храниться большое количество статей, карточек товаров, учетных записей и так далее.

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

На PHP же вы можете добавить ссылки на страницы в базу данных, а потом просто выводить нужное количество, в зависимости от запроса пользователя. Вы наверняка видели ссылки вида index.php?search=котики&num=100. После вопросительного знака находятся переменные в супермассиве GET (их вы будете часто использовать, если решите стать backend-разработчиком). Они передаются в код через адресную строку, а потом их можно использовать:

<?

if(isset($_GET['search'])) {$search = $_GET['search'];}

if(isset($_GET['num'])) {$num = $_GET['num'];}

$queryResult = mysql_query("SELECT * FROM cats WHERE category='$search' LIMIT $num");

if($queryResult && mysql_num_rows($queryResult)) {

while($queryArray = mysql_fetch_array($queryResult)) {

echo "<img src='/images/$queryArray[src]'><br>";

}

} else {

echo "Ничего не найдено(";

}

?>

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

Изучать PHP можно достаточно долго, потому что он предоставляет огромные возможности:

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

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

Основы PHP лучше изучить и frontend-разработчикам, чтобы разбираться в нем и понимать, какой код и куда нужно вставить.

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

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

Сравнение количества вакансий и уровня зарплаты для веб-разработчиков на hh.ru

Заключение

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

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

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

Курс «Профессия Веб-разработчик»
Практический годовой курс для тех, кто хочет стать профессиональным веб-разработчиком, запустить свой интернет-проект или веб-сервис и получить первые заказы на разработку.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Хочешь получать крутые статьи по программированию?
Подпишись на рассылку Skillbox
Посмотреть