Файл: Классификация web-сайтов.pdf

Элемент	Описание
Resource (ресурс).	Тип контейнера, для извлечения содержимого. Может иметь любое количество производных классов; наиболее распространенным является документ. Любой ресурс имеет свой уникальный идентификатор (ID).
Document (Документ)	Конкретный тип ресурса, который может быть контейнером для четырех видов ресурсов: Документов, Web-ссылок, статических ресурсов и символических ссылок (в большинстве случаев это обычная веб-страница).
Element (элемент)	Какой-либо элемент: шаблон, шаблон переменной, кусок, фрагмента, плагин, категория, или набор свойств в дереве элементов менеджера.
Chunk (чанк)	Блок html без исполняемых кодов, который можно использовать для встраивания в шаблоны, другие чанки, либо вызвать в снипете (TV). Чанк можно вызвать при помощи метки в виде [[$ChunkName]]

Окончание таблицы 4

Шаблон (template)	Базовая сущность, определяющая отображение страницы в MODx. Шаблоны обычно содержат HTML-теги разметки, которые определяют расположение и внешний вид вашего сайта. Когда страница сайта запрошена, MODx загружает документ или ресурс и его шаблон, затем MODx находит дополнительные поля в шаблоне и заменяет их соответствующими значениями из документа перед отправкой страницы в браузер. Шаблон может быть назначен любому ресурсу и определяет по сути веб-страницу в которой будет выведено содержимое этого ресурса.
Component (компонент)	Обеспечивает дополнительную функциональность для MODx в виде надстроек, шаблонов и дополнений.
Template Variables, сокращенно TV (переменные шаблона)	Особый вид ресурса поля, привязанный к шаблону, который используются для расширения стандартных полей, созданных пользователем. Вызывается следующим тегом: [[*tv]].
Chunk (чанк)	Блок html без исполняемых кодов, который можно использовать для встраивания в шаблоны, другие чанки, либо вызвать в снипете (TV). Чанк можно вызвать при помощи метки в виде [[$ChunkName]]
Snippet (сниппет)	PHP код, исполняемый во время обработки шаблона.
Category (категория)	Необязательное имя классификации, которое можно присоединить к любому элементу, чтобы отделить его от других подобных объектов.
Плагин (plugin)	Плагины также как и сниппеты представляют собой фрагменты кода, которые имеют доступ к MODx API. Однако в отличие от сниппетов плагины не требуется вызывать непосредственно в коде, т.к. они связаны с системными событиями, которые могут произойти на вебстранице. Т.е. код плагина выполняется только при наступлении какоголибо события на веб-страницы.

На основе блочной структуры был создан шаблон главной страницы web-сайта c использованием языка HTML и разметки CSS. Позже, на основе этого шаблона, был разработан общий шаблон для других страниц. В качестве текстового редактора для разработки HTML и CSS кода web-сайта сначала был выбран текстовый редактор Notepad++, свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Интерфейс текстового редактора Notepad++ представлен на рисунке 10.

Рисунок 10 – Интерфейс текстового редактора Notepad++

Но затем предпочтение было отдано в пользу Sublime Text 3 версии. К его преимуществам можно отнести следующие функции:

подсветка синтаксиса;
миникарта;
подсветка парных скобок;
кодкомплит.

Интерфейс текстового редактора Sublime Text 3 представлен на рисунке 11.

После этого началась работа по установке системы управления контентом CMS MODx Revolution на локальный компьютер. С официального сайта www.modx.com был скачен дистрибутив MODX Revolution версии 2.5.0.

Рисунок 11 – Интерфейс текстового редактора Sublime Text 3

Проанализировав существующие локальные серверы, для работы над разработкой web-сайта был выбран Open Server версии 5.2.2, скаченный с официального сайта www.ospanel.io. Интерфейс меню локального сервера представлен на рисунке 12.

Рисунок 12 – Интерфейс меню локального сервера Open Server версии 5.2.2

Следующим шагом было создание базы данных в приложении PhpMyAdmin. Для этого на локальном сервере Open Server было запущено данное приложение, после чего там была создана база данных под названием «euroremontural». Кодировка установлена в значении «utf8_general_ci» [3]. Интерфейс приложения PhpMyAdmin представлен на рисунке 13.

Рисунок 13 – Интерфейс приложения PhpMyAdmin

После установки и настройки сервера [1], на нем был создан домен «euroremontural». Интерфейс настройки локального сервера Open Server представлен на рисунке 14. Далее, следуя инструкции, с помощью дистрибутива MODx Revolution, на данный домен была «посажена» панель управления web-сайтом. База данных на PhpMyAdmin была автоматически заполнена CMS MODx своими служебными таблицами. Затем была произведена первичная настройка: указание имя сайта «Евроремонт Урал», настройка дружественных URL, а так же было отредактировано свойство ресурсов для их публикации по умолчанию [28].

Рисунок 14 – Интерфейс настройки локального сервера Open Server

После настройки панели управления началась работа над внедрением шаблона главной страницы. Для этого были созданы два ресурса «Главная» и «Ремонт квартир», а так же импортированы ранее созданные шаблоны «Home Page» для стартовой страницы, и «Base template» для других страниц.

Для оптимизации кода шаблонов повторяющиеся блоки были вынесены в отдельные чанки [19]. Первыми были созданы следующие чанки:

Includes [[$includes]] – служебные теги, подключение скриптов и стилей;
Header [[$header]] – шапка сайта и навигация;
Footer [[$footer]] – подвал сайта;
Top_nav [[$top_nav]] – «хлебные крошки».

Далее во вкладке ресурсы были созданы еще несколько документов: «Ремонт коттеджей», «Ремонт офисов», «Дизайн-проект», «О компании» c вложенными страницами «Почему мы» и «О нас в цифрах», «Портфолио», «Отзывы» и «Контакты». Им были назначены соответствующие шаблоны.

Структура страниц веб-сайта представлена на рисунке 15.

Рисунок 15 – Структура ресурсов web-сайта

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

MIGX (MultiItemsGridtv for MODX) – приложение для организации дополнительных полей (TV), созданный для того чтобы объединить несколько разных TV в один. Такая система объединенных полей очень сильно упрощает администрирование сайта, когда есть необходимость заполнять много информации. Поля ввода в MIGX могут быть всеми стандартными типами: текст, цифры, выпадающие списки, изображения, chekbox и прочее.

Приложение дает возможность пользователю гибко произвести настройку структуры и набор используемых полей ввода в рамках одного MIGX-поля. Приложение устанавливается со сниппетом getImageList, который позволяет быстро вывести данные из заполненного TV MIGX [18];

AjaxForm – служит для отправки любых форм через ajax;

Collections – дополнение для modx, создающее отдельную вкладку на странице редактирования ресурса для отображения дочерних ресурсов в виде подробной таблички с выводом и удобными возможностями изменения всех нужных полей (и основных и дополнительных);
Gallery – динамичное приложение для MODx Revolution. Позволяет создавать галереи картинок, сортировать и маркировать их, отображать их различными способами на фронтэнде («лицевой» части сайта)[7];
PdoTools – набор необходимых для работы сниппетов, таких как pdoMenu для построения меню, pdoSitemap для быстрого создания карты сайта и pdoCrumbs для работы с «хлебными крошками».

Управление приложениями производилось с помощью панели «Приложения» расположенной в верхней части панели управления CMS MODx. Панель «Приложения» представлена на рисунке 16.

Рисунок 16 – Панель «Приложения»

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

Для классификации чанков и TV полей во вкладке «Элементы» – «Категории» были созданы следующие категории:

Template – для повторяющихся блоков исходного кода встречающихся во всех шаблонах;

Выполненные работы – для блока с галереей; • Контент – для блоков с контентом на страницах; • Карусели – для блоков со слайдером.

Система управления контентом MODx является SEO-ориентированной. Для обозначения ключевых слов использовались поля «Описание» и «Аннотация». Создание ключевых слов для web-сайта представлено на рисунке 17.

Рисунок 17 – Ключевые слова

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

При настройке безопасности конечной целью является дать каждому пользователю соответвующий набор привилегий – разрешить ему совершать определенные действия в системе. Действия могут совершаться над различными объектами: страницами (resource), контекстами (context), чанками (chunk), переменными шаблонов (TV) и так далее. Сами действия могут быть очень разными, в простейшем случае это создание, просмотр, редактирование и удаление. Таким образом, задача настройки безопасности сводится к заданию отношений между пользователями, объектами и привилегиями.

В CMS MODx реализована возможность разграничения прав пользователей [15]. В режиме администратора пользователю доступны все операции: создание, редактирование, настройка и удаление ресурсов;

установка и удаление приложений;
создание, редактирование, настройка и удаление шаблонов;
настройка системы панели управления;
настройка параметров сайта;
создание, редактирование, настройка и удаление чанков.

С помощью панели «Пользователи» создана учетная запись контентменеджера «manager». Далее в панели «Настройки» – «Контроль доступа» для данного записи были ограниченны права. Панель настройки прав доступа представлена на рисунке 18.

Рисунок 18 – Панель настройки прав доступа

На странице «Ремонт квартир» так же расположены навигационная панель, контент страницы с описанием конкретной услуги, указан порядок работы, имеется два слайдера и форма обратной связи для вызова инженерасметчика. Так же на сайте имеются страницы «Ремонт коттеджей», «Ремонт офисов» и «Дизайн-проект» схожих по структуре. Страница с описанием услуги «Ремонт квартир» представлена на рисунке 19.

Рисунок 19 – Страница с описанием продукции

Страница «О компании» и вложенные страницы «Почему мы» и «О нас в цифрах» содержат обращение директора компании к посетителям ресурса, а так же общую информацию компании, включают в себя элементы текста, изображения и таблицы. Страница «О компании» представлена на рисунке 20.

Рисунок 20 – Страница «О компании»

Страница «Портфолио» содержит галерею с альбомами изображений готовых проектов с краткой информацией. Страница «Портфолио» представлена на рисунке 21.

Рисунок 21 – Страница «Портфолио»

Страница «Контакты» содержит полную контактную информацию о компании, реквизиты и карту с месторасположением компании. Страница с контактной информацией, реквизитами и схемой проезда представлена на рисунке 22.

Рисунок 22 – Страница «Контакты»

С помощью формы обратно связи можно запросить звонок от менеджера компании. Форма обратной связи представлена на рисунке 23.

Рисунок 23 – Форма обратной связи

В конце каждой странице расположен «подвал», где указаны контактные данные, информация об авторских правах и карта сайта. Блок «подвал» представлен на рисунке 24.

Рисунок 24 – «Подвал» web-сайта

2.4 Тестирование веб-сайта

Тестирование web-сайта заказчиком проводилось по следующим параметрам:

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

Смотрите также файлы

Общие особенности кадровой стратегии организаций бюджетной сферы (Сущность объектно-ориентированного программирования).pdf

Понятия данных.pdf

Сетевые операционные системы (Поддержка многопользовательского режима).pdf

Эволюция антимонопольного законодательства в разных странах..pdf

Учет наличных денежных средств в кассе предприятия (Практические аспекты бухгалтерского учета денежных средств в ООО «Родник»).pdf

Файл: Классификация web-сайтов.pdf

2.3.3 Разработка web-сайта средствами системы управления MODx

2.4 Тестирование веб-сайта

Смотрите также файлы

Информация

Списки файлов

Дополнительно