Веб-разработка — это процесс создания сайтов и веб-приложений, который состоит из множества этапов. Чтобы понять, как это работает, давайте разберемся, из чего состоит сайт.
Структура сайта
Любой сайт состоит из пользовательской и серверной частей. На странице в интернете вы видите текст, кнопки, панели, изображения и видео. Можете перемещаться по сайту, свободно изучать контент. Перед вами — пользовательская часть сайта и результат труда frontend-разработчика: визуализация, интерактивность и понятность интерфейса. Вы видите красивый дизайн, подсвеченные кнопки и интересную типографику, сайтом удобно пользоваться. Но как все это работает изнутри?
За логику, работоспособность и правильное функционирование сайта отвечает серверная часть, которая скрыта от пользователя. Ее созданием занимается backend-разработчик, а управлять может только администратор сайта через специальный интерфейс.
Любой запрос, который делает пользователь, передается на сервер. Вся работа происходит там. Запрос обрабатывается, фильтруется, а ответ отправляется обратно. Backend-разработка отвечает за правильное выполнение этого процесса.
Возьмем в качестве примера обычный компьютер. Вы свободно перемещаетесь по файлам и папкам, можете удалять и изменять информацию, добавлять новую, делать все, что хотите. Но в серверную часть для вас доступ закрыт. Компьютер скрывает папки с системными файлами, чтобы пользователь не наделал глупостей и не повлиял на его правильную работу. Примерно то же самое происходит с сайтом. Вам доступны только те части, которые не влияют на его работу. То есть вы можете пользоваться продуктом, но не имеете доступа к коду.
Серверная и пользовательская часть взаимосвязаны. И могут дать хороший результат, то есть понятный и функциональный сайт, только когда работают слаженно.
Чем отличается фронтэнд от бэкэнда
Представьте, что мы говорим о человеке, а не о программном обеспечении. Взаимодействие frontend- и backend-разработки похоже на слаженную работу человеческого тела и нервной системы. Подкожные рецепторы посылают информацию в мозг. Он обрабатывает полученные данные и отправляет ответный импульс, заставляя тело реагировать.
Frontend отвечает за то, как выглядит продукт.
Backend — за то, как этот продукт функционирует.
Про общение клиентов и серверов, или Как это работает на языке компьютера
Есть несколько клиентов. Клиентами могут быть обычные браузеры на компьютере или мобильном устройстве. Один из клиентов — браузер вашего компьютера. Вы хотите получить информацию из интернета. Делаете запрос: вводите ваш вопрос в поисковик Yandex или Google. Сразу же открывается страница с необходимой вам информацией.
Читайте также
Frontend- и backend-разработка: принципы и отличия
Срочно учите UX: почему простые дизайнеры скоро станут не нужны
Чем занимается веб-дизайнер на самом деле
Как это работает на самом деле? Ваш клиент, он же браузер, отправляет запрос на сервер. Сначала на сервер пользователя — frontend. Frontend-сервер (компьютер) обрабатывает запрос, выбирает backend-сервер, который в данный момент свободен, и отправляет ему запрос из браузера. Backend-сервер обрабатывает запрос, обращается к базе данных и посылает ответ на запрос обратно frontend-серверу. А frontend, так как он отвечает за удобство пользователя, уже отображает ответ на запрос в виде HTML-страницы.
Инструменты
Теперь вы знаете, что за пользовательскую часть сайта отвечает frontend-разработка. Главная задача разработчика — создать понятный интерфейс, с которым будет легко работать. Frontend — это не только дизайн, но и код, который помогает взаимодействовать с пользователем.
Какие инструменты нужны, чтобы создать клиентскую часть сайта
HTML — содержание сайта
За содержание сайта отвечает язык гипертекстовой разметки HTML. Это не язык программирования, но он поможет наполнить сайт необходимой информацией и расположить ее в нужных частях страницы. Все, что вы видите на сайте, — это HTML-файл. Но просто HTML-страница без оформления выглядела бы очень скучно и непривлекательно. Поэтому, чтобы оформить сайт, сделать его приятным для восприятия, нужен инструментарий CSS. Самые широкие возможности, включая адаптивности дизайна и анимацию, предоставляет версия HTML5, на которую сегодня и стоит ориентироваться.
CSS — оформление сайта
Этот язык отвечает за отображение HTML-документа. С его помощью верстка визуальной части сайта упрощается, у него появляется определенный стиль. А чтобы добавить интерактивности и динамики, например, мигающие кнопки, можно использовать JavaScript.
JavaScript — интерактивность сайта
Это полноценный язык программирования, который в веб-разработке используется для оживления сайта.
jQuery — фреймворк языка JavaScript
Библиотека с набором готовых функций, которые упрощают написание JavaScript-кода. Фреймворк позволяет не писать код заново, а подобрать подходящую часть из готового набора.
Какие инструменты нужны, чтобы создать серверную часть сайта
Для создания серверной части сайта нужно освоить полноценный язык программирования. Это может быть практически любой язык, но сейчас в веб-разработке чаще всего используют PHP. Это язык общего назначения, но для создания сайтов он подходит в большинстве случаев. Для разработки серверной части нужно разобраться с базами данных. Подойдет система управления базами данных MySQL.
Теперь вы знаете, из чего состоит веб-сайт, чем бэкенд отличается от фронтенда, умеете различать пользовательскую и серверную часть, получили общее представление о базовых инструментах веб-разработки и необходимых навыках.
Чтобы пойти дальше, нужно не только хорошо разобраться в теории, но и отработать полученные знания на практике. Мы подготовили для вас практический курс по веб-разработке. Можно учиться с удовольствием из любой точки мира, а в награду получить билет в новую профессию.
Курс «Профессия Веб-разработчик»
Практический годовой курс для тех, кто хочет стать профессиональным веб-разработчиком, запустить свой интернет-проект или веб-сервис и получить первые заказы на разработку.
Программа курса
