Frontend разработка
Я посветила свой индивидуальный раздел Frontend разработке сайтов, потому что работаю в данной области уже около года. В данном разделе я расскажу в целом о frontend разработке и о технологиях, которые знаю и применяю на практике.
Frontend – разработка сайтов
Пользователи видят и взаимодействуют только с той частью сайта, над которой работали Front-end разработчики. Все, что видит пользователь на сайте от шрифта, фона, выпадающего меню, слайдера создано с помощью HTML, CSS и JavaScript, контролируется браузером, который установлен на компьютере пользователя.
Front-end разработчик создает «лицо» сайта, часть, которую видит пользователь. Он учитывает опыт взаимодействия пользователей с сайтами. Чтобы пользователь был доволен всем и понимал, как работать с сайтом, разработчику необходимо знать языки программирования HTML, CSS и JavaScript, а также уметь работать с фреймворками Bootstrap, AngularJS, библиотеками типа jQuery и технологией Ajax, которая позволяет обращаться к серверу без перезагрузки страницы, а это живой поиск, элементы интерфейса, динамическая подгрузка сайтов.
Можно даже сказать, что Front-end разработчик отвечает за внешний вид, фасад сайта, над которым работали Back-end разработчики, если представить Интернет-сайт как здание.
Front-end разработчик совместно работает с дизайнерами и UX-аналитиками над разработкой сайта. Ему важно общаться с другими командами разработчиков, чтобы лучше понимать цели и потребности бизнеса и потом предлагать решения, которые будут лучше соответствовать целям бизнеса.
Все, что Вы сейчас видите на сайте Академии ШАГ создано Front-end разработчиками. Дизайнер создал логотип и графику, фотограф предоставил фотографии, копирайтер придумал тексты, а Front-end разработчик собрал все воедино и перевел на язык WEB[1].
Рисунок 1 – Frontend разработка
HTML и CSS
Для создания любой интернет-страницы используется язык гипертекстовой разметки HTML (HyperText Markup Language – стандарт оформления гипертекстовых документов – версия стандарта HTML 4.01 действует с 1999 года). Гипертекст – сложно структурированный текст в символах ASCII со вставленными в него гиперссылками (активными словами – командами, указывающими на другие места этого текста, другие документы, рисунки и т. д.). Таким образом, основой любой HTML-страницы является текстовый файл, в котором производится форматная разметка содержимого (форматы представления текстов, изображений, аудио – и видеоданных и пр.). Полученный файл называется HTML-файлом и имеет расширение. htm или. html. Поэтому HTML-документы можно создавать и редактировать в обычных текстовых редакторах, но эффективнее использовать специальные редакторы, например, Microsoft FrontPage.
Язык HTML позволяет создавать страницы, которые занимают маленький объем и быстро скачиваются даже при медленном телефонном соединении. Кроме того, он универсален и переносится под разные операционные системы и различные программы-просмотрщики (навигаторы, браузеры) интернет-страниц. При использовании HTML пересылается не графический файл, а инструкция программе-браузеру, в которой говорится, как и что программа должна отображать на экране.
HTML и CSS – совершенно разные технологии, но в них имеются механизмы интеграции, т. е. HTML располагает тегами, которые позволяют подключать CSS, а в CSS есть специальные способы привязки стилей к определенным тегам HTML.
Понятие стиля есть практически в любом текстовом редакторе. К свойствам стиля относят цвет, шрифт, отступы, фон и т. п. – вспомните Microsoft Word. Вы можете задать вариант оформления текста и применить его к нужным блокам текста. Стилем называется набор характеристик форматирования, которому назначено уникальное имя. С помощью стилей можно быстро отформатировать всю группу элементов страницы одним простым действием.
Cascading Style Sheets – одно из первых «дополнений» к языку HTML, способ задания в HTML-документе параметров оформления путем определения характеристик стилей.
С помощью CSS стало возможным переопределять параметры уже существующих HTML-стилей, например: задать конкретную гарнитуру для заголовка, размер шрифта, отступ абзаца, определить рамку и т. п., а также создавать собственные стили оформления, задавая в них необходимые значения параметров [3].
Рисунок 2 – HTML и CSS
JavaScript
При генерации страниц в Web возникает дилемма, связанная с архитектурой «клиент-сервер». Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.
Таким образом, JavaScript – это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript – это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.
Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.
Технология Ajax
Технология AJAX позволяет нам обмениваться данными меду браузером и сервером в фоновом режиме, не обновляя страницу, то есть без необходимости отправки дополнительных CGI-запросов серверу, что исключает задержки отклика на события, инициируемые клиентом (пользователем). Поэтому такой обмен называется асинхронным.
Под асинхронностью в программировании понимается процесс выполнения команд пользователя без необходимости синхронизации с сервером.
Асинхронность в случае AJAX можно представить в виде двух процессов: высокого приоритета и низкого. Первостепенным действием является процесс отображения страницы браузером. А второстепенным – обработка запросов пользователя сервером. В момент выполнения операций на стороне сервера, благодаря AJAX, браузер хотя и ждет ответа сервера, но не ограничивает работу пользователя со страницей.
Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:
- Вводятся в браузер средствами пользовательского интерфейса;
- Отправляются на сервер;
- Обрабатываются на сервере, возможно, заносятся в БД;
- В это время браузер ожидает возвращение ответа;
- Пока браузер ждет, он не прекращает работу пользователя;
- Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы [2].
Рисунок 3 – Технология Ajax
Ссылки
- WEB-разработка: кто такой Frontend, Backend и Full Stack разработчик [Электронный ресурс]. – Режим доступа: https://itstep.dp.ua
- Технология AJAX [Электронный ресурс]. – Режим доступа: http://bourabai.kz/php/ajax
- Технологии World Wide Web: основы HTML и CSS — реферат [Электронный ресурс]. – Режим доступа: http://referatbox.com/