Занятие 1. Время прохождения 50 мин
Университет
Интернет Технологий, Экономики, Менеджмента и Психологии.
Факультет 001.
Информационных технологий.
Курс 001.4.2. Введение в веб-разработку.
Занятие 1.
Введение в веб-разработку
- что за профессия веб-разработка
- какие в ней есть варианты
- какие используются технологии
- варианты профессии
Способы создания веб-сайтов
1) Первый вариант создания сайтов очень популярный в сегодняшний день появился не так давно - это онлайн конструктор. wix.com, тильда, конструкторы провайдеров услуг (хостинг, банки и пр.). Возможность визуально создавать блоки на сайте и добавлять функциональность путём нажатия кнопок, а не написания кода.
2) Системы управления сайтами (cms - content management system, система управления содержимым сайта). Платные и бесплатные, узкоспециализированные под задачу или широкого назначения. Самая популярная WordPress. Для онлайн продаж в России популярна платная CMS 1 C-Bitrix. Как образовательная платформа – бесплатная CMS Moodle.
Добавление новых страниц происходит через административную панель. Новый функционал – путём установки дополнительных модулей (плагинов), часто бесплатных. Серьезных навыков по владению языками программирования не требуется.
3) Верстка статического сайта (HTML, CSS, JavaScript) – одна или несколько страниц, отсутствие функционала (нет регистрации, админской панели, вся работа через код). Возможен интерактив, вроде всплывающих окон, форм обратной связи.
4) Разработка динамического сайта (HTML, CSS, JavaScript, база данных и один из серверных языков программирования – php, python, go lang, NodeJS и пр.). Данные хранятся в базе данных, на сервере происходит обработка обращения к конкретной странице и динамически формируется ответ в виде готовой странички. Страница формируется из шаблона и набора данных.
Наличие серверной части значительно расширяет функциональные возможности сайта. Они могут быть сколь угодно сложными – форумы, онлайн-магазины, образовательные порталы и многое другое.
Разделение ответственности в разработке
- frontend разработка (визуальная составляющая, с которой взаимодействует пользователь)
- backend-разработка (серверная составляющая, работа для пользователя не столь очевидна)
frontend разработка
- внешний вид, верстка сайта
- интерактивная составляющая (слайдеры, всплывающие окна, обновляющийся контент без перезагрузки страницы браузера, фильтрация и многое другое).
- асинхронная работа с сервером (подгрузка новых данных на страницу, отправка новой информации в базу данных и пр.)
backend-разработка
- администрированием баз данных (sql, nosql), хранение, добавление новых данных, изменение существующих, удаление данных.
- формирование шаблонов страниц
- на базе данных и шаблонов – динамическое формирование конкретных страниц для пользователей
- функциональные возможности на сайте (регистрация, прием платежей, форумы, закрытые курсы и многое другое)
- безопасность сайта
Минимальный набор технологий
Вне зависимости от выбираемой профессии в веб-разработке необходимы знания HTML, CSS и JavaScript. Даже если вы будете делать сайты на конструкторах и системах управления содержимым сайтов ( cms) эти языки будут полезны. В зависимости от выбираемого направления, уровень владения этими технологиями разнится, плюс в каждом случае добавляется что-то еще – конкретные компетенции помимо минимальной базы.
HTML - это язык разметки страниц. Его задача – указать, где что лежит. Как аналогия - это каркас дома, строительный материал: где подвал, где дверь, где окно, где крыша… Нужно четко определить где у нас заголовки на странице, где формы, где видео вставка, где картинки, где таблица и так далее.
Как это все будет выглядеть - это уже CSS. Это язык оформления, язык стилей. Как и HTML, это не язык программирования. Как аналогия с домом – это как строительные материалы дома будут организованы, в каком порядке, каких размеров, какого цвета, может быть из какого материала они будут…
JavaScript – язык программирования. В нашей аналогии - это умный дом. Мы построили дом украсили, его стилями и нам нужно какую-то логику добавить, чтобы свет мог включаться при использовании выключателя либо по хлопку, чтобы электричество было в розетках, вода в кране шла после поворота смесителя. Интерактив – взаимодействие с конечным пользователем. Реакция на его действия.
Другая аналогия – человеческое тело. HTML – как скелет, CSS – внешний вид человека, JavaScript – нервная система, реагирующая на окружающую вселенную.
Варианты развития в веб-разработке (профессии)
1) веб-мастер
Может работать с конструкторами и/или системами управления сайтами (CMS). Может работать с хостингом, разворачивать CMS и настраивать их, наполнять контентом.
Знание HTML, CSS, JavaScript не обязательны, но существенно расширяют компетенции веб-мастера (доработки по внешнему виду, добавление счетчиков и аналитики на сайт и многое другое).
2) верстальщик сайтов
Превращение дизайнерских макетов в статические адаптивные веб-странички.
Необходимо уверенное владение HTML и CSS, базовое владение JavaScript.
Хорошая площадка для дальнейшего развития во frontend-разработчика.
3) frontend-разработчик
Уверенное владение HTML и CSS. Высокий уровень владения JavaScript и сопутствующих технологий.
4) backend-разработчик
Базовое владение HTML, CSS, JavaScript. Уверенное владение хотя бы одним серверным языком программирования (php, python, go lang, NodeJS и пр.) и умение работать с базами данных.
5) full-stack-разработчик
Широкий специалист, одинаково владеющий как frontend, так и backend составляющей сайта. Обычно хорошие full-stack-разработчики вырастают из опытных frontend или backend специалистов, когда те хотят дополнить свою квалификацию и расширить набор компетенций.