Настройка внешнего вида СЭО 3КL версии 4.1

1. Общая информация

Фирменная тема оформления, входящая в продукт СЭО 3KL версии 4.1.x, позволяет гибко настроить внешний вид страниц системы согласно вашим предпочтениям, особенностям фирменного стиля учебного заведения или оформления корпоративного сайта (Рис. 1.1).

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

Тема оформления «СЭО 3KL» адаптирована для просмотра экранах с различной шириной, в том числе на экранах мобильных устройств.

Выполнить настройку внешнего вида можно самостоятельно или при помощи специалистов технической поддержки ООО «Открытые технологии».

-Вернуться к содержанию-

2. Возможности и рекомендации по самостоятельной настройке оформления

Самостоятельная настройка внешнего вида требует наличия у пользователя определенных знаний о системе и прав диспетчера-администратора. Справочный материал о СЭО 3КL доступен в клиентской базе знаний и в разделе «Консультационные вебинары для клиентов» учебного портала.

Кастомизация внешнего вида выполняется путем изменения/выбора нужных параметров, добавления текстов и файлов изображений (логотипа, фона подложки и т. п.) в соответствующих разделах настроек администрирования активного (выбранного по умолчанию) профиля темы оформления «СЭО 3КL»: Администрирование->Внешний вид->Темы->СЭО 3КL->Активный профиль-> (Рис. 2.1).

Рассмотрим некоторые возможности настройки внешнего вида системы.

-Вернуться к содержанию-

2.1. Добавление/изменение логотипа

Логотип вашей организации может быть размещен в левой части шапки страницы (Рис. 2.1.1).

Файл изображения логотипа должен иметь название logo и формат:

• .jpg/jpeg;
• .png (с прозрачным фоном);
• .svg (векторное изображение).

Подготовленный файл изображения логотипа необходимо загрузить с помощью файлового менеджера в поле «Изображение логотипа» раздела настроек «Логотип» на странице «Шапка страницы» активного профиля темы оформления «СЭО 3КL» (Администрирование->Внешний вид->Темы->СЭО 3КL->Активный профиль->Шапка страницы) (поз. 1 Рис 2.1.2).

В этом же разделе настроек можно «отцентровать» положение логотипа в шапке, задав (в пикселах) значения отступов сверху/справа/снизу/слева (см. поз. 2 Рис 2.1.2).

Все совершенные на странице действия необходимо подтвердить, нажав кнопку «Сохранить изменения».

При подготовке логотопа для сайта следует учитывать некоторые рекомендации:

• желательно использовать логотип горизонтальной направленности, так как при его отображении в шапке сайта будут хорошо видны и читаемы все элементы;
• в качестве форматов для логотипа желательно использовать форматы jpeg, png, gif. Использование формата svg рекомендуется только продвинутым пользователям, так как изображение такого формата может отличаться в разных браузерах;
• необходимо учитывать вес файла логотипа, так как при отображении на сайте логотип только внешне масштабируется по ширине до 420 px. Размер исходного файла в байтах остается прежним, что может увеличить нагрузку на пользователя при загрузке страницы;
• отступы со всех сторон логотипа (сверху, справа, снизу, слева) можно настраивать. Не рекомендуется делать большие отступы сверху и снизу, так как это может увеличить высоту шапки в мобильном устройстве;
• дополнительную текстовую область рекомендуется использовать только в случае крайней необходимости. Если она используется, желательно добавить только 1-2 строки текста;
• использование логотипа в шапке необязательно. При отсутствии логотипа на его место сместится описательный текст шапки;
• При уменьшении ширины экрана менее 768 px шапка сайта автоматически адаптируется под размер экрана: ее элементы при этом выстраиваются по вертикали и центрируются (Рис. 2.1.3). Если предполагается, что пользователи для доступа к среде электронного обучения будут активно использовать мобильные устройства — учитывайте это при выборе размера логотипа.

-Вернуться к содержанию-

2.2. Добавление/изменение текста в подвале страницы

Нижняя часть страницы (подвал) содержит область для размещения произвольного текста, например: ссылок на важные и популярные ресурсы, названия портала электронного обучения, организационной информации и т. п. (Рис. 2.2.1).

Подготовленный текст необходимо разместить в окне поля настроек «Текст в подвале» страницы «Подвал страницы» активного профиля темы оформления «СЭО 3КL» (Администрирование->Внешний вид->Темы->СЭО 3КL->Активный профиль->Подвал страницы) (Рис 2.2.2).

Все совершенные на странице действия необходимо подтвердить, нажав кнопку «Сохранить изменения».

-Вернуться к содержанию-

2.2.1. Общие рекомендации по настройке подвала

Визуально подвал делится на три области: левую (поз. 1. Рис. 2.2.1.а), центральную (поз. 2. Рис. 2.5.1) и правую (поз. 3. Рис. 2.2.1.а).

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

Центральная область (см. поз. 2. Рис. 2.2.1.а) также позволяет с помощью визуального редактора добавить текстовую область и ссылки. Обычно используется для вспомогательного меню и быстрого перехода на различные ресурсы: как внешние, так и внутри системы.

В правую область (см. поз. 3. Рис. 2.2.1.а) включены: блок авторизации, ссылка на сброс тура по системе, редактируемая текстовая область.

При наполнении областей подвала материалами рекомендуем учитывать следующие особенности:

1) Логотип, загруженный в подвал, не имеет фиксированных размеров, а изменяется в зависимости от размеров экрана, занимая при этом некоторую область страницы в процентах.  В пункте настроек «‎Размер логотипа» (поз 3. Рис. 2.2.1.б) вы можете определить ширину левой области, а также задать отступ до центральной области, изменяя при этом размер логотипа. 

2) При небольших размерах логотипа относительно страницы, текст и ссылки на социальные сети, помещенные в левую область подвала, будут переноситься на другую строку из-за нехватки места в этой области, поэтому не рекомендуется одновременно помещать туда и логотип, и вспомогательный текст, либо, помещая в эту область изображение с логотипом, сделать его шире, чем размер логотипа. Например, подготовить изображение шириной 300 px, а поместить туда логотип шириной 150 px. В этом случае не стоит забывать, что при изменении размера экрана до 768 px и меньше содержимое подвала выстраивается по вертикали и центрируется, поэтому ни выравнивание по левому краю, ни выравнивание логотипа по центру внутри картинки не будет смотреться выгодно.

3) Такие блоки, как социальные сети, блок авторизации, блок «‎На базе СЭО 3KL» являются нередактируемыми, поэтому не рекомендуется использовать выравнение по центру или по правому краю для редактируемых блоков.

4) При добавлении текста описания к логотипу, если выполнена заливка подвала одним цветом, система может автоматически настроить цвет этого текста, однако эта функция не будет работать при использовании текстуры. В таком случае рекомендуем задать цвет текста явным образом в разделе настроек профиля темы оформления «‎Цветовая схема».

5) В редакторе правой области подвала (поле «‎Текст копирайта») отсутствует возможность прямой загрузки изображения. Если вам необходимо разместить в правой области подвала какую-либо картинку, вы можете использовать ссылку на ее: со стороннего файлового хранилища или загрузить требуемое изображение в публичную зону профиля темы оформления (Администрирование -> Внешний вид -> Темы -> СЭО 3KL -> Нужный профиль -> Общие настройки).

Загрузка файлов происходит в пункте «‎Добавить файлы в публичную зону». При необходимости можно создать папку и загрузить в нее изображение (Рис. 2.2.1.в). 

Далее необходимо:

1. Сохранить изменения.
2. Перейти к списку файлов, который находится сразу под окном добавления файлов в пункте «‎Добавить файлы в публичную зону».
3. Найти нужный файл.
4. Нажать на него правой кнопкой мыши и копировать адрес ссылки (Рис. 2.2.1.г).

Вернувшись к настройкам подвала, скопированную ссылку можно вставить в поле «‎URL» в открывшемся модальном окне (Рис. 2.2.1.д) в поле настроек подвала «‎Текст копирайта», определить размер и выравнивание, добавить описание.

6) Типовой размер экрана пользователя составляет 1920 px, сайт расширяется до ширины 1720 px. Для того, чтобы подвал растягивался от края до края независимо от размера экрана, необходимо в группе настроек «‎Подвал» отметить опцию «‎Ширина без ограничений».

7) При разрешении, равном или меньшем 768 px, структура подвала меняется: элементы выстраиваются по вертикали и центрируются (Рис. 2.2.1.е). При настройке внешнего вида подвала рекомендуется проверять, как он выглядит как на экранах с большим, так и на экранах с малым разрешением. Для этого можно воспользоваться встроенным в браузер отладчиком.

-Вернуться к содержанию-

2.3. Изменение иконок в док-панели

Для отображения свернутых в док-панель блоков (Рис. 2.3.1) в СЭО 3КL предусмотрено несколько предустановленных наборов иконок.

Чтобы сменить ранее выбранные (предустановленные) иконки, необходимо на странице «Общие настройки» активного профиля из выпадающего списка поля «Используемый набор иконок» выбрать другой набор (Рис. 2.3.2).

Выбор нового набора необходимо подтвердить, нажав кнопку «Сохранить изменения».

Отображаемые в док-панели иконки будут изменены (Рис. 2.3.3).

-Вернуться к содержанию-

2.4. Изменение цвета иконок элементов курса

Настройки пользовательского CSS кода позволяют задать цвет для иконок элементов курса или группы элементов курса. Эти настройки можно выполнить по следующему пути: Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Общие настройки.

Для того, чтобы задать цвет иконке элемента курса, нужно добавить следующий код в поле настройки «Пользовательская настройка css темы» (Рис. 2.4.1):

Листинг кода для настройки цвета иконки элемента курса:

где

• [НАЗВАНИЕ_ЭЛЕМЕНТА] — техническое название элемента, для которого выполняется настройка, например «quiz» для элемента курса «Тест»;
  
• [HEX_КОД_ЦВЕТА] — HEX код цвета фона иконки элемента курса, например, «#fdff17» для желтого цвета фона;
• [ФИЛЬТР_ЦВЕТА] — «none» для черного цвета иконок и «brightness(0) invert(1)» для белого цвета иконок.

Технические названия элементов курса:

Также можно задать цвет сразу для всех иконок, объединенных в одну группу. Для этого в поле «Пользовательская настройка css темы» нужно ввести следующий код (Рис. 2.4.2):

Листинг кода для настройки цвета иконок групп элементов курса:

где

• [НАЗВАНИЕ_ГРУППЫ] — техническое название группы элементов, для которого выполняется настройка, например «collaboration» для группы элементов курса «Совместная работа»;
  
• [HEX_КОД_ЦВЕТА] — HEX код цвета фона иконки группы элементов курса, например, «#16007a» для синего цвета фона;
• [ФИЛЬТР_ЦВЕТА] — «none» для черного цвета иконок и «brightness(0) invert(1)» для белого цвета иконок.

-Вернуться к содержанию-

3. Настройка оформления СЭО 3КL по брифу

Самостоятельное выполнение полного объема работ по кастомизации оформления СЭО 3КL может оказаться непростым для неподготовленного диспетчера-администратора. Поэтому, существует возможность создать заявку на настройку базового шаблона оформления системы силами сотрудников технической поддержки. К заявке должна быть приложена вся необходимая информация (бриф) о желаемом внешнем виде системы.

Алгоритм действий при настройке оформления по заявке:

1) Выберите удовлетворяющий вас готовый вариант из каталога преднастроенных профилей темы оформления или заполните в Маршруте внедрения анкету-тест «Бриф на стилизацию СЭО 3КL». Для этого:

• зайдите под своей учетной записью на портал учебного центра ООО «Открытые технологии»;
• в разделе «Шаг 3. Настройка оформления» курса «Маршрут внедрения» пройдите тест «Бриф на стилизацию СЭО 3КL»;

• после завершения теста (заполнения анкеты):

  • нажмите «Закончить попытку»;
  • проверьте, что на все вопросы были даны ответы;
  • нажмите «Отправить все и завершить тест» в окне подтверждения.

2) Оформите заявку на клиентском портале в категории «Гарантийная техподдержка/Бриф на стилизацию СЭО» (Рис. 3.1).

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

-Вернуться к содержанию-

4. Дополнительные сервисы по кастомизации оформления СЭО 3КL

Выполнение более глубокой кастомизации внешнего вида СЭО 3КL (например, редактирование графических материалов, программирование, правка исполняемых файлов и т. п.) требует от исполнителя наличия специфических знаний и затрат времени. В случае, когда Заказчик не располагает достаточными временными ресурсами, компетенциями или специалистами, ООО «Открытые технологии» предлагает дополнительные сервисы по дизайну и брендированию системы.

Дополнительный сервис может быть предоставлен в рамках:

• тарифного плана;
• расширенной технической поддержки;
• отдельного договора на сервис.

4.1. Настройка шаблона оформления для СЭО 3KL в стиле предоставленного макета или образца

В рамках данного сервиса специалисты технической поддержки выполнят настройку индивидуального профиля темы оформления для СЭО 3KL на основании исходного материала, предоставленного Заказчиком: графического макета (со всеми необходимыми файлами изображений, логотипов и т. п.) или ссылки на сайт-образец. Дизайнер максимально приблизит внешний вид системы к предоставленному образцу, используя настройки и доступные опции темы оформления через веб-интерфейс (без непосредственной правки кода и внесения изменений в HTML, CSS и PHP).

Примененный в системе шаблон оформления не повлияет на структуру и содержимое, компоновку и поведение главной страницы, курсов и других элементов системы, а только изменит их графическое оформление в предусмотренных архитектурой СЭО 3KL пределах («шапка» сайта, «подвал» сайта, цвета и подложки элементов сайта, шрифты и т. п.).

-Вернуться к содержанию-

4.2. Адаптация внешнего вида СЭО 3KL под потребности Заказчика

Сервис позволяет сформировать внешний вид системы, используя настройки индивидуального профиля шаблона оформления, дизайн которого выполнен на основе брендбука, образца фирменного стиля или адаптации мокапов Заказчика под особенности архитектуры СЭО 3KL.

В рамках сервиса доступны опции:

• разработка индивидуального дизайна оформления и логотипа;
• предоставление нескольких альтернативных макетов дизайна;
• внесение и редактирование контента, размещение, перемещение и настройка блоков на страницах СЭО 3KL;
• разработка динамических элементов интерфейса (интерактивные меню, модифицированные окна авторизации, модифицированные витрины курсов и т. п.);
• участие специалистов Исполнителя в совещаниях с представителями Заказчика по телефону, Skype и конференц-связи.

-Вернуться к содержанию-

4.3. Разработка прототипа среды электронного обучения

Данный сервис предназначен для создания рабочего прототипа системы дистанционного обучения, учитывающего пожелания Заказчика по внешнему оформлению и структуре, и включающего один курс, предназначенный для демонстрации возможностей СЭО 3KL.

В процессе разработки прототипа выполняется:

• настройка внешнего вида среды дистанционного обучения с использованием функционала базового
  шаблона оформления (размещение логотипа, изменение цветовой схемы и ряда элементов шаблона оформления и т. п.);
• формирование структуры среды дистанционного обучения: создание направлений и категорий;
• наполнение витрины пустыми курсами (не более десяти);

• создание, наполнение и оформление одного курса по предоставленным материалам Заказчика.

Курс создается с учетом следующих ограничений:

• до 10 тематических секций;
• 1÷4 теста, суммарно содержащих не более 30-ти вопросов;
• до 6 заданий;
• 1÷2 материала типа «Лекция», суммарно содержащих не более 10 слайдов;
• 1 глоссарий, содержащий до 10 терминов;
• загрузка до 6 видео- или аудио-роликов;
• загрузка до 6 pdf-файлов или файлов иных форматов;
• подготовка по одному изображению для каждой секции в описательную часть;
• до 3-х элементов «Логика курса»;
• до 4-х тестовых пользователей (2 учителя + 2 слушателя).

-Вернуться к содержанию-

4.4. Работа с электронными материалами Заказчика (ассистент редактора)

В рамках данного сервиса, специалисты ООО «Открытые технологии» помогут Заказчику с  наполнением, редактированием, подготовкой курсов и материалов курсов:

• наберут/отредактируют любые тексты, в том числе уже размещенные в курсах;
• переведут отдельные тексты или целый курс более чем на 50 языков;
• разместят учебные материалы Заказчика в СЭО 3KL;
• переведут тесты и задания Заказчика в формат СЭО 3KL;
• исправят форматирование текста, правильно оформят цитаты, ссылки, сноски;
• обработают изображения (цветовая коррекция, ретушь, нанесение дополнительных специальных обозначений и символов);
• выполнят сканирование/распознавание/корректировку печатного текста;
• подготовят материалы к публикации;
• проверят задания по предоставленному Заказчиком образцу.

-Вернуться к содержанию-

4.5. Разработка (в рамках сервиса «Расширенная техническая поддержка»)

В рамках сервиса «Расширенная техническая поддержка» силами инженеров ООО «Открытые технологии» могут быть выполнены доработки СЭО 3KL, выходящие за рамки базовых тарифов с фиксированной абонентской платой. Например:

• модификация системы и модуля «Электронный деканат»;
• интеграция с корпоративными СУБД;
• изменение функционала;
• разработка модулей;
• техническая поддержка сторонних модулей, не входящих в базовую поставку;
• нестандартное конфигурирование системы (организация кластера, горячее резервирование и т. п.).

-Вернуться к содержанию-

5. Примеры и решения

5.1. Создание и наполнение сетки для кастомного региона

Задача:

Организовать в верхней части страницы описания курса «Устройство мотоцикла. Для демонстрации» специальную область для размещения блоков, визуально разделенную на три секции. Разместить в левой секции блок «Поделиться ссылкой», в правой — блок «Топ-10», по центру — блок «Рейтинг курса» (Рис. 5.1.1).

Решение:

1) Перейти на страницу настройки регионов, расположенную по следующему пути: Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Настройки регионов. Открыть на ней раздел «Страница описания курса» (Рис. 5.1.2).

2) Нажать на кнопку «+» в пункте «Сетка для сворачиваемой секции блоков «Над контентом» (см. поз. 1 Рис. 5.1.2), чтобы добавить в сетку строку.

3) Нажать на кнопку «+» рядом с созданной строкой (Рис. 5.1.3), чтобы добавить первый сегмент в строку.

4) Три раза нажать на кнопку «+» в первом сегменте (Рис. 5.1.4), чтобы увеличить его ширину до четырех условных единиц (Рис. 5.1.5). 

5) Дважды повторить действия, описанные в пунктах 3 и 4, чтобы создать еще два сегмента в строке такой же длины, как и первый (Рис. 5.1.6).

6) Заполнить кастомный регион. Для этого перейти на страницу описания курса «Устройство мотоцикла. Для демонстрации», переключиться в режим редактирования (поз. 1 Рис. 5.1.7), открыть выдвижную панель блоков (поз. 2 Рис. 5.1.7), нажать на кнопку «Добавить блок» (поз. 3 Рис. 5.1.7) и в появившемся окне выбрать блок «Поделиться ссылкой» (поз. 4 Рис. 5.1.7). Блок будет размещен в выдвижной панели.

7) Нажать на значок шестеренки рядом с добавленным блоком (поз. 1 Рис. 5.1.8) и выбрать опцию «Настроить блок «Поделиться ссылкой» (поз. 2 Рис. 5.1.8).

8) Выбрать соц. сети для размещения ссылки (поз.  1 Рис. 5.1.9). Выбрать в качестве области размещения «cs-ctop-1-1», чтобы разместить блок в левой части области «Над контентом» (поз. 2 Рис. 5.1.9). Сохранить изменения.

9) Повторить пункты 6 и 7: добавить таким образом блок «Рейтинг курса» и перейти к его настройкам. Выбрать в качестве области размещения «cs-ctop-1-2», чтобы разместить блок по центру области «Над контентом» (Рис. 5.1.10). Сохранить изменения.

10) Еще раз повторить пункты 6 и 7: добавить таким образом блок «Топ-10» и перейти к его настройкам.

В блоке нужно настроить отображение рейтинга пользователей по разделу «Мото-достижения» (раздел достижений настраивается отдельно) (Рис. 5.1.11):

• выбрать тип рейтинга для отображения = Пользователи с максимальным рейтингом в выбранном разделе портфолио (см. поз. 1 Рис. 5.1.11);
• ввести название рейтинга, которое будет отображаться в шапке блока = Лучший пользователь по мото-достижениям (см. поз. 2 Рис. 5.1.11);
• выбрать количество позиций в рейтинге = 1, чтобы в блоке выводился один пользователь, лучший по рейтингу (см. поз. 3 Рис. 5.1.11);
• выбрать раздел достижений = Мото-достижения (см. поз. 4 Рис. 5.1.11).

Выбрать в качестве области размещения «cs-ctop-1-3», чтобы разместить блок в правой части области «Над контентом» (см. поз. 5 Рис. 5.1.11). Сохранить изменения.

11) Вернуться к настройкам кастомного региона (Администрирование->Внешний вид->Темы->СЭО 3KL->Нужный профиль->Настройки регионов) и выбрать в настройке «Состояние сворачиваемой секции «Над контентом» при загрузке страницы» значение «Нельзя свернуть» (Рис. 5.1.12). Выйти из режима редактирования.

Результат:

Для авторизованного в системе пользователя на странице описания курса «Устройство мотоцикла. Для демонстрации» в верхней части контентной области развернуты и доступны блоки «Поделиться ссылкой», «Рейтинг курса» и «Топ-10» (Рис. 5.1.13).

-Вернуться к содержанию-

5.2. Настройка цветовой схемы глоссария

В настройках подразделов «Глоссарий, ссылки автоматического связывания» и «Глоссарий, ссылки автоматического связывания при наведении» можно задать цвета фона, текста и изображений для ссылок автоматического связывания в глоссарии (Рис. 5.2.2, Рис. 5.2.3).

-Вернуться к содержанию-