6. Разработка мобильной версии сайта

Так как веб-сайт, для которого создается мобильное приложение уже реализован на Bitrix Framework, воспользуемся встроенной технологией Bitrix. Данная технология позволяет разрабатывать сайты с помощью стандартных средств Bitrix Framework на языках HTML, PHP и JavaScript.

Для начала, надо разобраться, что такое веб-сайт с точки зрения Bitrix Framework:

Сайт - это совокупность:

· Учетной записи в базе данных, которая создаётся в административном меню на странице Список сайтов (Настройки > Настройки продукта > Сайты > Список сайтов) и включает в себя следующие основные параметры:

§ идентификатор - набор символов, идентифицирующий сайт;

§ доменное имя - одно или более доменное имя сайта;

§ папка сайта - путь к каталогу, в котором будет храниться публичная часть сайта;

§ язык сайта;

§ формат даты;

§ формат времени;

§ URL - протокол и доменное имя по умолчанию (например, http://www.site.ru)

§ DocumentRoot - параметр заполняется при использовании многосайтовости системы.

§ условия подключения шаблонов: каждый сайт может иметь один или более шаблонов для отображения страниц публичной части, каждый такой шаблон может быть подключен по тому или иному условию.

· Публичной части - совокупности скриптов (страниц) лежащих в папке сайта и принадлежащих этому сайту.

· Настроек. Каждый модуль может иметь ряд настроек связанных с сайтом, например, у модуля Информационные блоки эти настройки представляют из себя привязку информационного блока к тому или иному сайту, у модуля Техподдержка - привязку статуса, категории и т.п. к сайту.

Структура

Структура сайта в рамках Bitrix Framework:

· Шаблон - определяет представление сайта пользователям. Существуют шаблоны компонентов и шаблоны сайта.

· Компоненты - задают вывод данных.

· Страница - элемент структуры сайта.

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

Я выбрал второй вариант, так как он имеет ряд преимуществ:

· Во-первых, этот вариант требует меньше усилий и времени для реализации.

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

· Третья причина проще, но гораздо весомее. Система 1С-Битрикс является платной программой и в ней стоит ограничение на количество сайтов, размещаемых в системе. Увеличение количества сайтов стоит от 21 тысячи рублей, поэтому бесплатный вариант обладает большим приоритетом.

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

Шаблон сайта определяет:

· оформление сайта (дизайн, верстку страниц, набор основных каскадных стилей);

· типы меню и их расположение;

· наличие рекламных областей (областей для размещения баннеров);

· наличие включаемых областей в шаблоне и страницах сайта;

· наличие в дизайне сайта формы авторизации, оформления подписки и т.д.

Шаблон дизайна сайта обычно состоит из трех основных частей:

· Верхней части дизайна (header);

· Рабочей области страницы (Work area);

· Нижней части дизайна (footer).

Header - верхняя часть дизайна, заголовок. Включает в себя, как правило, верхнюю и левую часть дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Может включать в себя информационные динамические материалы. Хранится в отдельном файле .../<идентификатор_шаблона>/header.php.

Work area - рабочая область страницы, в которой размещаются собственно информационные материалы сайта. Рабочая область - это все создаваемые пользователями документы, хранящиеся в файлах<имя_документа>.php в соответствующих папках сайта.

Footer - нижняя часть дизайна со статической информацией (как правило: контактная информация, сведения об авторе и владельце сайта и так далее), нижним горизонтальным меню и правым меню (если они есть в дизайне). Может включать в себя информационные материалы. Хранится в отдельном файле.../<идентификатор_шаблона>/footer.php.

Процесс создания шаблона сайта включает два основных этапа:

1. создание прототипа шаблона дизайна;

2. создание полнофункционального шаблона.

Разработка прототипа шаблона дизайна

Прототип представляет собой сверстанный в html шаблон дизайн сайта. При верстке в шаблоне выделяются функциональные области, например:

· заголовок страницы;

· меню;

· цепочка навигации;

· форма авторизации;

· форма поиска;

· включаемые области и файлы;

· рекламные области;

· и т.д.

Создание полнофункционального шаблона дизайна

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

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