Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

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

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

Сейчас вы читаете статью на сайте 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-фреймворк

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

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать крутые статьи по программированию?
Подпишись на рассылку Skillbox
Новогодняя распродажа курсов
Посмотреть