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

Этапы разработки веб-сайта

На сегодняшний день существуют несколько этапов разработки веб-сайта:

  • Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания , проектирование интерфейсов);
  • Разработка креативной концепции сайта;
  • Создание дизайн-концепции сайта;
  • Создание макетов страниц;
  • Создание мультимедиа и FLASH -элементов;
  • Вёрстка страниц и шаблонов ;
  • Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS);
  • Оптимизация и размещение [ ] материалов сайта;
  • Тестирование и внесение корректировок;
  • Публикация проекта на хостинге ;
  • Обслуживание работающего сайта или его программной основы.

В зависимости от текущей задачи, какие-то из этапов могут отсутствовать.

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

  1. Цели и назначение сайта;
  2. Аудитория сайта;
  3. Технические характеристики;
  4. Содержание сайта (структура сайта с подробным описанием элементов и функционала каждой страницы);
  5. Интерактивные элементы и сервисы (формы обратной связи, поиск на сайте, форум на сайте);
  6. Формы (отправки на почту, подписки на рассылку, обратной связи);
  7. Система управления контентом;
  8. Требования к материалам;
  9. Перенос на хостинг.
Дизайн основной и типовых страниц сайта Начинается работа с создания дизайна , обычно в графическом редакторе . Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.
При этом дизайнер должен учитывать ограничения стандартов HTML (не создавать дизайн, который затем не сможет быть реализован стандартными средствами HTML). Исключение составляет Flash -дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Также менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком. HTML-верстка Утверждённый дизайн передаётся HTML-верстальщику , который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает HTML-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны . Программирование Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS - системы управления сайтом. Веб-разработчики часто называют CMS «движком ».
В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» - в данном случае правильно будет назвать его просто специалистом по CMS - должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».
При программировании сайта специалисту назначаются контрольные точки сроков. Завершающим этапом разработки сайта является тестирование Процесс тестирования может включать в себя самые разнообразные проверки: вид страницы с увеличенными шрифтами, при разных размерах окна браузера , при отсутствии флэш-плеера и многие другие. Также - юзабилити-тестирование .
Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены. Сроки контролирует менеджер проекта. Также, на этом этапе привлекают к работе дизайнера, чтобы он провёл авторский надзор . Размещение сайта в Интернет Файлы сайта размещают на сервере провайдера (хостинга) и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей. Наполнение контентом и публикация Сайт наполняют контентом - текстами, изображениями, файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта.:На каждой странице находятся текстовые блоки, они могут быть типовыми (стандартные) и не типовыми. Как правило нетиповой текстовый блок расположен на странице 404. К стандартным текстовым блокам относятся:
  • header сайта;
  • footer сайта;
  • навигационная цепочка, или "хлебные крошки".
Основные элементы текстового блока:
  1. заголовки 1, 2 и 3 уровней;
  2. изображения;
  3. изображения в тексте;
  4. галереи;
  5. текст;
  6. раскрывающийся блок текста, который содержит заголовок;
  7. нумерованные и ненумерованные списки;
  8. таблицы;
  9. файлы для скачивания;
  10. видео.
Внутренняя SEO-оптимизация Связана с некоторыми изменениями самого сайта. SEO-оптимизация начинается с определения семантического ядра. Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, чтобы поисковые системы могли их успешно находить по ключевым словам. Внешняя SEO-оптимизация Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка сайта . К разработке сайта внешняя SEO-оптимизация не имеет отношения. SEO-оптимизация классифицируется на «белую» и «черную» (такую, после которой сайт за две недели попадает в топ, а потом в бан поисковиков). Настоящая, «белая» SEO-оптимизация, это трудоёмкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта. Сдача проекта Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.
Также, на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.

Интернет - это почти 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 месяцев (плюс стажировка) и состоит из нескольких курсов.

  1. HTML / CSS . Это основы создания сайтов. Обучение идёт через практику: студенты разрабатывают сайт интернет-магазина, изучая параллельно свойства и возможности HTML / CSS.
  2. JavaScript - первый и второй уровни. Этот язык программирования призван сделать сайт живым: он взаимодействует с посетителем ресурса, реагирует на движения курсора, клики мыши и нажатия на клавиши. В первом курсе по JavaScript даются азы, во втором полученные знания закрепляются.
  3. Основы баз данных . Это 20 интенсивных видеоуроков о системах хранения и обработки данных, для доступа к которым используется язык SQL (Structured Query Language).
  4. PHP - первый и второй уровни. Этот язык программирования входит в тройку самых популярных. На первом уровне студенты изучают принципы объектно-ориентированного программирования и учатся правильно использовать основные конструкции языка. Второй уровень позволяет отточить владение PHP до виртуозности.
  5. HTML5 и CSS3 . Эта связка даёт возможность верстать макеты, создавать и редактировать статические сайты. На курсе студенты проходят все этапы создания рекламного сайта для коммерческой организации.
  6. AngularJS / D3.js . Здесь студенты учатся работать с D3.js в симбиозе с мощнейшим фреймворком построения одностраничных веб-приложений Angular.js.
  7. Yii framework . Это один из самых популярных и востребованных фреймворков на PHP. На лекциях рассматривается базовый и продвинутый шаблоны приложения и разрабатывается аналог программы Evernote. В качестве домашнего задания студентам предлагается создать программу-календарь, которую впоследствии можно использовать в портфолио.

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

Сливки

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

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

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

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

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

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

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

Какова роль веб-разработчика?

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

Так веб-разработчик может создать дизайн сайта?

Может, но не стоит доверять создание дизайна инженеру 🙂 Речь в предыдущем разделе шла именно о реализации самого сайта, а проектированием дизайна должен заниматься соответствующий специалист.

Кто такой фронтенд-разработчик?

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

А бэкенд-разработчик?

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

Кто такой full-stack разработчик?

Full-stack разработчики обладают всеми знаниями и умениями веб-разработчика: как в области фронтенда, так и бэкенда. Сейчас стандартом для full-stack разработчика считается знание верстки, клиентской и серверной частей ресурса, а также баз данных и различных фреймворков.

Как много можно на этом заработать?

Труд веб-дизайнера и веб-разработчика по данным портала trud.com оценивается в среднем 35 000–60 000 рублей в месяц, что выше или совпадает со средним показателем по России - 35 000 рублей в месяц, согласно данным banki-v.ru. У этих профессий нет ограничения зарплат сверху, и на заработную плату влияют в большей степени навыки и знания, чем стаж работы.

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

Чтобы получить все необходимые в профессии навыки, начните с обучающих курсов:

  • По окончании вы будете уметь профессионально работать в редакторе Adobe Photoshop, представлять, что такое дизайн, проектирование веб-интерфейсов и построение интерфейсов мобильных приложений.
  • сделает из вас полноценного full-stack специалиста, способного создать клиентскую сторону ресурса при помощи HTML5, CSS3, JavaScript, а также умеющего работать с базами данных и имеющего практический работы с PHP и фреймворком Yii2.

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

Короткий ответ: они создают и поддерживают веб-сайты.

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

Более детальное объяснение с learn.org :

Обязанности веб-разработчика

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

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

Где вы работаете

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

Другие навыки

Вам потребуется хорошее знание технологии и понимание того, как работают компьютеры и веб-серверы. Так же вам необходимо быть хорошо знакомым со множеством софтверных языков, веб-приложений и языков веб-программирования, таких как гипертекстовый язык разметки (HTML), Ruby on Rails и C++. Поскольку это очень клиенто-ориентированная и проекто-ориентированная сфера деятельности, вам будет необходимо эффективно общаться, устанавливать цели и дедлайны. Так же вам придется иметь представление о принципах дизайна.

Выносим ключевые моменты:

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

Важные различия

"Фронтенд" против "Бэкенд" разработчиков

Фронтенд:

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

Фронтенд-разработчики часто фокусируются на понимании HTML, CSS и Javascript, поскольку эти языки работают в браузере. Они не обязательно фокусируются на том, чтобы делать вещи "красивыми" (что зачастую оставляют дизайнерам), но скорее на том, чтобы информация была представлена эффективно и пользовательское взаимодействие с веб-страницей было настолько комфортным, насколько это возможно. Сегодня мы выполняем все больше и больше кода непосредственно в браузере.

Бэкенд:

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

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

Фуллстак (full stack):

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

Веб-разработчик против веб-дизайнера

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

Дополнительные ресурсы

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

Веб-сайты против веб-приложений

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

Более конкретный пример: подумайте о приходе на обычный веб-сайт как об открытии документа (скажем, электронной книги) на вашем жестком диске. Ваш компьютер найдет его, откроет и покажет его вам.

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

Это более или менее заметная разница между сервером, который просто показывает вам статический HTML и сервером, который динамически генерирует для вас нужную страницу, используя немного кода на Ruby on Rails.