Разработка фронтенд части сайта

Размещено на http://www.allbest.ru/

Разработка фронтенд части сайта

Куценко Д.А., студент

4 курс, институт «Информационные системы и технологии» Владивостокский государственный университет экономики и сервиса

Россия

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

Ключевые слова и словосочетания: Фронтенд, бэкенд, интерфейс, сайт, пользовательский, Frontend-разработчик.

DEVELOPMENT OF THE FRONTEND PART OF THE SITE

Any site can initially be divided into two parts: server and user. When you visit any site, you are presented with its user component, the Frontend part. The entire interface that you see in front of you is the result of the work of the Frontend developer. Clarity, convenience, interactivity, these are the main points of what you have to work on when developing the site interface.

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

Применению сайтов, почти нет предела, все зависит от потребностей той или иной компании, либо нужд пользователя. Но все же создание сайтов, в зависимости от случаев, является трудоемким процессом, так же самим сайтам, нужна поддержка в дальнейшем, для того, чтобы сайт оставался актуальным и работоспособным. Создание сайтов делится на 2 части, это создание фронтенд (Frontend) и бэкенд (Backend).

Фронтенд - это все то, что браузер может выводить на экран пользователя и/или запускать. Для этого используются следующие языки: HTML, CSS и JavaScript. HTML (HyperText Markup Language) - отвечает за то, какие элементы будут отображаться на странице. CSS (Cascading Style Sheets) - отвечает за то, как эти элементы будут отображаться, их расположение, стили. JavaScript - задает этим элементом алгоритмы того, как они будут реагировать на некоторые действия пользователя, проще говоря добавляет сайту некой интерактивности.

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

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

Создание фронтенд части сайта, делится на четыре основных пункта:

- проведения анализа похожих сайтов;

- анализ потребностей пользователей;

- макетирование;

- верстка;

- программирование визуальных элементов.

Первым делом необходимо определить цели сайта, а если конкретнее, то, для чего создается данный сайт.

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

- примеры цветового оформления сайта;

- примеры блоков на сайт, а также их расположение;

- примеры интегрированности сайта, а если точнее взаимодействия сайта с пользователем;

- примеры расположения страниц сайта и переходов между ними.

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

После проведения анализа сайтов, проводится анализ потребностей пользователей. Часто для такого анализа собирается тестовая группа или проводится соцопрос. На данном этапе выясняются основные потребности и предпочтения потенциальных пользователей будущего сайта, например, такие как:

- функционал будущего web-сайта;

- дизайн web-сайта;

- способы навигации по сайту;

- и многое другое.

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

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

- создание структуры сайта;

- блочное макетирование страницы;

- разработка визуального стиля.

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

Рисунок 1. Пример структуры сайта

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

Рисунок 2. Пример блочного макета страницы

используется все то, что было сделано ранее. На данном этапе пишется код на языке HTML, который и формирует страницы будущего сайта. При написании кода страницы, действуют такие же правила как при написании кода программы и важную роль играет оптимизация кода, так как это напрямую будет влиять на скорость прогрузки страницы у пользователя в браузере. Во время этого этапа вносятся финальные правки во внешний дизайн сайта. В наше время существует множество конструкторов сайтов, которые облегчают данный этап. Многие из них используют систему «drag and drop», позволяющую почти полностью исключить момент с написанием кода, конструктор его пишет за пользователя. Однако зачастую эти конструкторы не отличаются хорошей оптимизацией кода, что влияет на скорость загрузки страницы в браузере пользователя.

Важным этапом во время верстки является адаптивная верстка. В наше время существует множество форматов разрешения под разные устройства, и чтобы не создавать сайт под каждый формат, существует такой прием при создании сайта, как, адаптивная верстка. Она автоматически подстраивает дизайн сайта под поведение пользователя, платформу и размер экрана. Чем лучше настроена адаптивная верстка, тем под большее количество форматов она подходит. Настройка адаптивной верстки происходит в файле стилей при помощи языка CSS.

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

Таким образом в данной работе описаны главные этапы разработки фронтенд части сайта. И подводя итог всего вышесказанного, можно сделать вывод, что разработка фронтенда является объемным процессом, затрагивающим такие направления, как: программирование; дизайн, аналитика и др. Очень многое при создании сайта зависит не только от разработчика, но также от компании, для которой этот сайт создается, а также от конечного пользователя, для которого этот сайт создается.

Использованные источники

1. Что должен уметь фронтенд-разработчик [Электронный ресурс]. URL: https://habr.com/ru/company/netologyru/blog/327294 (дата обращения

15.06.2021) .

2. Что такое frontend разработка [Электронный ресурс]. URL: https://php.zone/post/chto-takoe-frontend-razrabotka (дата обращения 15.06.2021)

3. Простыми словами о «фронтенде» и «бэкенде»: что это такое и как они

взаимодействуют[Электронныйресурс].URL: https://tproger.ru/translations/frontend-backend-interaction/ (дата обращения

15.06.2021) .

4. Как сделать адаптивный сайт под все разрешения экрана [Электронный ресурс]. Ц^: https://royal-site.ru/verstka/kak-sdelat-adaptivnyj-dizajn-sajta-pod- vse-razresheniya-ekrana/ (дата обращения 16.06.2021).

Размещено на Allbest.ru