В статье описывается разработка мобильных приложений и сайтов. Дается определение языкам, используемым при создании сайта, а также характеристика front-end и back-end разработкам. Подробно рассматривается адаптивный дизайн, выделяются его особенности, преимущества и недостатки. Приводится пример эффективного инструмента при создании адаптивного сайта — фреймворка Bootstrap.
Ключевые слова: Front-end разработка, Back-end разработка, адаптивный дизайн, фремфорк, Bootstrap.
В современном мире мы постоянно работаем с сайтами и приложениями. Они могут нести образовательную или развлекательную функцию, а также служить для коммерческих целей. Несмотря на то, что эти новшества появились не слишком давно, за этот короткий срок методы создания и разработки веб-сайтов и мобильных приложений претерпели достаточное количество изменений.
Первый сайт был создан в 1989 г. Тимом Берносом Ли с помощью языка гипертекстовой разметки HTML. Он и на сегодняшний день является самым популярным. Хотя его версии постоянно видоизменялись и совершенствовались, главный принцип построения остается таким же, каким его преподнес Тим Бернес Ли. Главные инструменты при верстке — HTML и CSS, а также непосредственно языки программирования. Так, например, последние несколько лет самым используемым языком в веб-сфере является Java Script. HTML (HyperText Markup Language) — это стандартный язык, используемый для создания Web-страниц и поддерживаемый всеми приложениями обозревателей. [4] CSS (от английского слово Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. [3]
Существует два уровня в разработке приложений. Разделение на уровни помогает структурировать работу и не запутаться. Для эффективной разработки каждый специалист должен отвечать за свою область.
Front-end разработка — это работа, отвечающая за создание общедоступной части сайта, которая обрабатывается на стороне клиента (в браузере), именно с ней сталкивается пользователь, посещая сайт. К front-end разработке можно отнести создание дизайнером макета сайта, верстку пользовательских интерфейсов, шаблонов для системы управления сайтом (CMS), а также добавление к интерфейсу скриптов, отвечающих за визуализацию и web-анимацию. [2]
Back-end разработкой называют процесс наполнения функционала сайта и создания программной составляющей. [5]
Веб-дизайнеры связаны с front-end разработкой, так как именно она воспринимается визуально. Поэтому рассмотрим подробнее именно эту часть.
Front-end-разработчики обязаны достигнуть результата, при котором страница в точности повторяет макет дизайнера и одинаково отображается во всех браузерах. Для достижения этого разработчику необходимо обладать набором базовых навыков и современных инструментов. [1] Веб-дизайнер работает над внешним видом, макетом и, в некоторых случаях, содержимым веб-сайта. Внешний вид, например, относится к используемым цветам, шрифту и изображениям. Макет относится к тому, как информация структурирована и классифицирована. Хороший веб-дизайн прост в использовании, эстетически приятен и подходит для группы пользователей и бренда веб-сайта. Многие веб-страницы разработаны с упором на простоту, поэтому не появляется никакой посторонней информации и функций, которые могут отвлекать или вводить пользователей в заблуждение. Поскольку краеугольным камнем результатов веб-дизайнера является сайт, завоевывающий доверие целевой аудитории и всячески способствующий этому, устранение как можно большего количества потенциальных точек разочарования пользователей является критически важным фактором.
С распространением мобильных устройств дизайнеры должны учитывать разнообразие размеров экрана. Это проблема, с которой в настоящее время сталкивается каждый веб-дизайнер и дизайнер приложений. Это может быть экран гигантского корпоративного монитора или умных часов.
Поскольку прогресс не стоит на месте, нужно постоянно что-то менять для удобства и соответствия новым тенденциям и требованиям. Сегодня у всех смартфонов и ноутбуков разные размеры экранов. И это обязательно нужно учитывать при создании сайта. Мнение потребителя об интернет-магазине существенно испортится, если он обнаружит, что не может просматривать сайт с мобильного устройства. Может возникнуть другая проблема — в мобильном приложении сайт сильно теряет в качестве. Понимание пользователя на мобильном устройстве на 50 % меньше, а это означает, что элементы контента, навигации и визуального дизайна должны быть вдвойне интуитивно понятными, чем на рабочем столе.
На сегодняшний день, самый оптимальный вариант — это создание сайта учитывая требования адаптивного дизайна. Адаптивный дизайн относится к дизайну графического интерфейса, который адаптируется к различным размерам экрана. Дизайнеры применяют его в графических интерфейсах, таких, как веб-страницы, которые должны работать на устройствах разных размеров. Адаптивный дизайн обычно использует несколько фиксированных размеров макета. Когда система определяет размер браузера, она выбирает макет, наиболее подходящий для экрана (например, смартфон).
В адаптивном дизайне используется разработка стандартов для шести наиболее распространенных экранов шириной 320, 480, 760, 960, 1200 и 1600 пикселей. Преимущество адаптивного дизайна заключается в том, что он позволяет дизайнеру создавать индивидуальные решения, чтобы графический интерфейс оптимально отображался на экранах разных размеров. Недостаток заключается в том, что адаптивный дизайн стоит дорого, так как требует от дизайнера создания до шести отдельных графических интерфейсов, что эквивалентно шести версиям одной веб-страницы. Другим недостатком является то, что адаптивный дизайн не может помочь пользователям, у которых нет стандартного размера экрана.
Как инструмент адаптивного дизайна можно использовать фреймворки. Фреймворк — это программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.
С помощью подобного набора инструкций сверстать страницу становится намного проще, так как отпадает необходимость разбираться с адаптивностью и задумываться о том, как страница будет выглядеть на экранах мобильных устройств.
Фреймворки избавляют от необходимости писать много повторяющегося кода. Поэтому главный плюс их использования — это экономия драгоценного времени, поскольку фреймворки используют готовые компоненты.
Один из самых популярных фреймворков можно назвать Bootstrap. Он опирается на проект LESS, который является усовершенствованием языка CSS. Компоненты Bootstrap представляют собой часто используемые готовые HTML- блоки с предопределенными стилями. Иногда они могут использовать Java Script. Верстальщик может использовать как готовый компонент, так и определить свой внешний вид для него.
Таким образом, можно сделать вывод, что прогресс не стоит на месте, нужно постоянно что-то менять для удобства и соответствия новым тенденциям и требованиям. Сегодня сайты просматриваются на ноутбуках, мобильных телефонах и планшетных устройствах, поскольку многим они заменяют стандартные стационарные компьютеры. У всех этих средств разные размеры экранов. И это обязательно нужно учитывать при создании сайта. Поэтому наилучший, на наш взгляд, выбор — адаптивный дизайн. А для быстрого и качественного построения отличным помощником будут фреймворки.
Литература:
- Биктимиров, Р. Р. Современные инструменты front-end разработки. [Электронный ресурс]. — URL: https://www.elibrary.ru/item.asp?id=27278022
- Дорогина, А. С. Front-end разработка. [Электронный ресурс] / А. С. Дорогина, О. Н. Сафонова, Н. В. Тутова. — URL: https://www.elibrary.ru/item.asp?id=26416683
- Максутова, А. Статистический сайт на HTML, CSS и на Bootstrap [Электронный ресурс]. — URL: https://elibrary.ru/item.asp?id=32645391
- Рева, О. Н. Создание Web-станиц. Просто, как 2х2 / О. Н. Рева О. Н. — Москва: Изд-во Эксмо, 2005. — 208 с.
- Хеник, Б. HTML и CSS. Путь к совершенству/ Б. Хеник. — Санкт-Петербург: Питер, 2011. — 336 с.
