СОЗДАНИЕ АДАПТИВНОГО WEB–РЕСУРСА

Невозможно сейчас представить нашу жизнь без интернета. Публикация информации в сеть стало нормой. В связи с этим используется огромное множество различных web-ресурсов[1, c. 9] и распространение информации в сети на данный момент является актуальным.

Большое количество людей каждый день используют интернет как основной источник получения и поиска нужной информации. Web-сервис выступает как средство привлечения к продуктам компании, средством коммуникации, а также для привлечения большого числа клиентов. В связи с этим, для большинства крупных компаний и предприятий, разработка web-сервиса является большой необходимостью. Для любой компании создание web-сервиса дает огромное преимущество, поскольку за небольшой срок приток клиентов увеличится в несколько раз, соответственно увеличится прибыль. Web-сервис, разработанный профессионалом прост в управлении. Но ведь нужно правильно подходить к разработке, учитывать все нюансы и тонкости[2, c. 14]. Сегодня интернет доступен не только с использованием ноутбуков и стационарных ПК. Не менее, а может даже больше пользователей используют для поиска мобильные устройства.

Во-первых, нужно сразу делать web-сервис адаптивным[4, c. 6]. Адаптивный веб-дизайн – дизайн веб-страниц, обеспечивающий корректное отображение web-сервиса на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность web-сервиса для различных устройств. Для того, чтобы web-сервис был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии web-сервиса для отдельных видов устройств.

Для этого в файлах стилей формата .css нужно использовать media запросы. Media queries позволяют изменять расположение и размер блоков на странице в зависимости от размера экрана. Один из таких запросов представлен на рисунке 1.

Рисунок 1. Медиа запрос

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

Так же важно всегда при начале верстки страницы задавать значение body и html

{

     margin: 0 auto;

     height: 100%;

}

Это позволяет растянуть разметку страницы на всю высоту экрана, а также убрать отступы с краев.

Для быстрого подключения шрифтов, без надобности лишний раз скачивать определенный шрифт и его параметры и нагружать свой хостинг, рекомендуется подключать шрифты посредством Google Fonts. Этого намного упрощает процесс разработки и верстки страниц. Достаточно просто найти определенный шрифт на сервисе и подключить его в своем файле стилей (рис. 2).

Рисунок 2. Подключение шрифтов

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

Приложение на РНР, использующее для хранения информации базу данных (в частности MySql) всегда работает быстрее приложения, построенного на файлах[3, c. 48]. Для разработки web-сервиса была выбрана СУБД MySQL из за того, что это самая распространенная полноценная серверная СУБД, которая успешно работает с различными web-сервисами.

В файле формата .php нужно прописать подключение к этой базе данных. Строка кода подключения к базе данных приведена на рис. 3.

Рисунок 3. Подключение базы данных

Следующим шагом будет написание кода для регистрации пользователей и внесение их в базу данных (рис. 4).

Рисунок 4. Скрипт регистрации

Целью данной работы было проанализировать современные аспектыразработки и продемонстрировать применение их на примере web-сервиса мастерской деревянных изделий Беза, размещенный в сети интернет. На рисунке 5 представлен вид экрана для данного web–ресурса для разных устройств.

Рисунок 5. Вид web-сервиса на экране монитора и на мобильном устройстве

Для разработки был использован текстовый редактор Sublime Text 3 и базы данных MySQL. Результат – web-сервис полностью адаптивный, размер страниц подстраивается под экран устройства пользователя, а также web-сервис предоставляет пользователям возможность регистрации и последующего заказа продукции.

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

Список литературы:

1. Колесниченко, Денис PHP и MySQL. Разработка Web-приложений [Текст] / Денис Колесниченко – БХВ-Петербург, 2015 – 592 с.Кедлек, Тим Адаптивный дизайн [Текст] / Тим Кедлек – СПб: Питер, 2013 – 288 c.
2. Клименко, Р. А. Веб-мастеринг на 100%. [Текст] / Р.А. Клименко — СПб: Питер, 2013. — 512 с.\
3. Маклафлин, Бретт PHP и MySQL. Исчерпывающее руководство. [Текст] / Бретт Маклафлин – СПб: Питер, 2013 – 508 с.
4. Сырых, Ю.А. Современный веб-дизайн. Настольный и мобильный [Текст] / Ю.А. Сырых, 3-е издание – М: Диалектика / Вильямс, 2014 – 384с.