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

Сергей Гусев, Полина Андреева
2024-03-25 09:49
В данной статье рассматривается внешний вид СЭО 3КL версии 4.1.х. С особенностями внешнего вида СЭО 3КL версии 3.9.х можно ознакомиться в статье «Настройка внешнего вида СЭО 3КL версии 3.9».
Внешний вид СЭО 3KL может быть изменен согласно вашим пожеланиям. Необходимые настройки оформления можно определить, ответив в разделе маршрута внедрения «Шаг 3. Настройка оформления» на вопросы теста «Бриф на стилизацию СЭО 3КL» или выбрав понравившийся готовый вариант из каталога преднастроенных профилей темы оформления.
Содержание:
1. Общая информация
2. Возможности и рекомендации по самостоятельной настройке оформления
  2.1. Добавление/изменение логотипа
  2.2. Добавление/изменение текста в подвале страницы
    2.2.1. Общие рекомендации по настройке подвала
  2.3. Изменение иконок в док-панели
  2.4. Изменение цвета иконок элементов курса
3. Настройка оформления СЭО 3КL по брифу
4. Дополнительные сервисы по кастомизации оформления СЭО 3КL
  4.1. Настройка шаблона оформления для СЭО 3KL в стиле предоставленного макета или образца
  4.2. Адаптация внешнего вида СЭО 3KL под потребности Заказчика
  4.3. Разработка прототипа среды электронного обучения
  4.4. Работа с электронными материалами Заказчика (ассистент редактора)
  4.5. Разработка (в рамках сервиса «Расширенная техническая поддержка»)
5. Примеры и решения

  5.1. Создание и наполнение сетки для кастомного региона
  5.2. Настройка цветовой схемы глоссария
Функционал, описанный в данной статье, в полном объеме доступен в СЭО 3КL начиная с версии 4.1.7a.
Если вы используете более раннюю версию системы — обратитесь с заявкой на проведение обновления в службу технической поддержки ООО «Открытые технологии».

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

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

Рис. 1.1. Примеры настроек внешнего вида СЭО 3КL.

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

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

Подробнее о теме оформления «СЭО 3KL» в статье «Настройки темы оформления «СЭО 3КL».

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

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

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

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

Тематическая информация о настройке внешнего вида системы в вебинарах и статьях:

Вебинар #03. Сервисы по оформлению, управление профилями темы, основные группы настроек
Вебинар #06. Особенности отображения и возможности настройки внешнего вида шапки сайта в теме оформления «Открытые технологии»
Вебинар #09. Настройки внешнего вида док-панели и рекомендации по использованию блока Слайдер
Вебинар #12. Особенности отображения и возможности настройки внешнего вида подвала сайта в теме оформления «Открытые технологии»
Вебинар #15. Рекомендации по настройке внешнего вида оглавления курса и тематических секций. Часть первая
Вебинар #17. Рекомендации по настройке внешнего вида оглавления курса и тематических секций. Часть вторая
Вебинар #19. Рекомендации по настройке регионов: принудительное сворачивание и закрепление блоков, создание дополнительных областей размещения
Вебинар #21. Внешний вид страницы авторизации в теме оформления «Открытые технологии»
Вебинар #24. Установка сторонних шрифтов и защита контента от копирования с помощью настроек в профиле темы оформления «Открытые технологии»
Вебинар #27. Рекомендации по настройке внешнего вида главной страницы. Понятие Витрины курсов и ее общие особенности
Вебинар #30. Витрина курсов. Общие настройки
Вебинар #32. Витрина курсов. Страница описания курса
Вебинар #37. Поиск и фильтрация в Витрине курсов
Вебинар #42. Бриф по настройке внешнего вида СЭО 3KL. Обзор новой версии

Статья Настройка темы оформления «СЭО 3KL
Статья Форматы курсов
Статья Изменение стандартных текстов, отображаемых пользователям в теме «СЭО 3KL»

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

Рис. 2.1. Активный «Рабочий профиль» и его настройки в перечне профилей темы оформления «СЭО 3КL».

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

Подробное описание всех настроек темы оформления изложено в статье  «Настройка темы оформления «СЭО 3KL».

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

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

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

Рис. 2.1.1. Расположение логотипа в шапке страницы.

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

  • .jpg/jpeg;
  • .png (с прозрачным фоном);
  • .svg (векторное изображение).
Величина отображаемого на экране логотипа напрямую зависит от размера изображения в пикселах.

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

Рис. 2.1.2. Пример загруженного файла логотипа в активный профиль СЭО 3КL «Рабочий профиль».
Подробнее о файлах в СЭО 3КL и инструментах для работы с ними в статье «Работа с файлами в СЭО 3КL. Файловый контент».

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

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

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

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

Рис. 2.1.3. Пример внешнего вида шапки на экране с разрешением меньшем, чем 768 px.
Следует помнить, что в теме оформления «СЭО 3КL» может быть настроено несколько профилей оформления, каждый из которых содержит свой набор настроек. Если, в процессе работы с системой, вы используете несколько профилей - логотип должен быть загружен не только в активный профиль (см. Рис. 2.1), но и во все используемые.
Подробная информация о настройке шапки страницы в вебинаре «Особенности отображения и возможности настройки внешнего вида шапки сайта» и соответствующем разделе статьи «Настройки темы оформления «СЭО 3КL».

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

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

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

Рис. 2.2.1. Текстовая область в подвале страницы.

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

Рис. 2.2.2. Раздел «Текст в подвале» страницы настроек «Подвал страницы».

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

Подробнее о работе со встроенным редактором и возможностях форматирования добавляемого текста в статье «Руководство по работе с редактором «Atto».
Подробная информация о настройке подвала страницы в вебинаре «Особенности отображения и настройки внешнего вида подвала СДО» и соответствующем разделе статьи «Настройки темы оформления «СЭО 3КL».

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

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

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

Рис. 2.2.1.а. Области подвала страницы.

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

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

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

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

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

Рис. 2.2.1.б. Страница настроек «Подвал страницы».

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

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

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

Подробнее об изменении цвета текста в соответствующем разделе статьи «Настройки темы оформления «СЭО 3КL».

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

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

Рис. 2.2.1.в. Создание папки и добавление в нее файла.

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

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

Рис. 2.2.1.г. Получение ссылки загруженного файла.

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

Рис. 2.2.1.д. Окно для добавления URL изображения в пункте настроек подвала «‎Текст копирайта».
Подробнее о загрузке  и хранении файлов в СЭО 3КL в статье «Работа с файлами в СЭО 3КL. Файловый контент».

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

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

Рис. 2.2.1.е. Пример внешниего вида подвала на экране с разрешением меньшем, чем 768 px.

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

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

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

Рис. 2.3.1. Иконки блоков в док-панели.

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

Рис. 2.3.2. Выбор набора иконок «Одноцветный минимализм (стальной)».

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

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

Рис. 2.3.3. Новые иконки в док-панели.
Дополнительная информация о настройке док-панели в вебинаре «Настройки внешнего вида Док-панели и блока Слайдер» и соответствующем разделе статьи «Настройки темы оформления «СЭО 3КL».

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

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

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

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

Рис. 2.4.1. Пользовательская настройка css темы для задания цвета иконки элемента курса.

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

/* Комментарий с названием элемента курса */
div.modchoosercontainer div.activityiconcontainer.modicon_[НАЗВАНИЕ_ЭЛЕМЕНТА],
.course-content .section .activity:not(.nomono) div.activitytitle.modtype_[НАЗВАНИЕ_ЭЛЕМЕНТА] > div.activityiconcontainer {
background-color: [HEX_КОД_ЦВЕТА];
}
div.modchoosercontainer div.activityiconcontainer.modicon_[НАЗВАНИЕ_ЭЛЕМЕНТА] > img.icon.activityicon,
.course-content .section .activity:not(.nomono) div.activitytitle.modtype_[НАЗВАНИЕ_ЭЛЕМЕНТА] > div.activityiconcontainer img.activityicon {
filter: [ФИЛЬТР_ЦВЕТА];
}

где

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

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

Элемент курса / Ресурс Техническое название
Анкета survey
База данных data
Библиотека ресурсов otresourcelibrary
Взаимная оценка otmutualassessment
Вики wiki
Внешний инструмент lti
Гиперссылка url
Глоссарий glossary
Задание assign
Занятие 3KL event3kl
Книга book
Контрольный список checklist
Лекция lesson
Логика курса otcourselogic
Обратная связь feedback
Опрос choice
Отзыв о курсе endorsement
Офлайн тест offlinequiz
Пакет IMS содержимого imscp
Пакет SCORM scorm
Папка folder
Семинар workshop
Сертификат СЭО 3KL simplecertificate
Страница page
Субкурс subcourse
Текст и медиа label
Тест quiz
Файл resource
Форум forum
Чат chat
H5P h5pactivity
H5P (старый) hvp
HotPot hotpot
xAPI Launch Link tincanlaunch

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

Рис. 2.4.2. Пользовательская настройка css темы для задания цвета группы иконок элементов курса.

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

/* Комментарий с названиями элементов курса или названием группы элементов курса */
div.modchoosercontainer div.activityiconcontainer.[НАЗВАНИЕ_ГРУППЫ],
.course-content .section .activity:not(.nomono) div.activitytitle div.activityiconcontainer.[НАЗВАНИЕ_ГРУППЫ]{
background-color: [HEX_КОД_ЦВЕТА];
}
div.modchoosercontainer div.activityiconcontainer.[НАЗВАНИЕ_ГРУППЫ] img.activityicon,
.course-content .section .activity:not(.nomono) div.activitytitle div.activityiconcontainer.[НАЗВАНИЕ_ГРУППЫ] img.activityicon{
filter: [ФИЛЬТР_ЦВЕТА];
}

где

  • [НАЗВАНИЕ_ГРУППЫ] — техническое название группы элементов, для которого выполняется настройка, например «collaboration» для группы элементов курса «Совместная работа»;
  • [HEX_КОД_ЦВЕТА] — HEX код цвета фона иконки группы элементов курса, например, «#16007a» для синего цвета фона;
  • [ФИЛЬТР_ЦВЕТА] — «none» для черного цвета иконок и «brightness(0) invert(1)» для белого цвета иконок.
Группа элементов Техническое название Элементы курса / ресурсы группы
Совместная работа collaboration База данных
Взаимная оценка
Вики
Глоссарий
Форум
Материалы content Библиотека ресурсов
Внешний инструмент
Гиперссылка
Книга
Лекция
Пакет IMS содержимого
Пакет SCORM
Папка, Страница
Текст и медиа
Файл
H5P
Взаимодействие со слушателями communication Анкета
Занятие 3KL
Обратная связь
Опрос
Чат
Оценка assessment Задание
Контрольный список
Офлайн-тест
Семинар
Тест
Управление курсом administration Логика курса
Отзыв о курсе
Сертификат СЭО 3KL
Другие other Субкурс
H5P (старый)
HotPot
xAPI Launch Link

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

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

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

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

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

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

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

Рис. 3.1. Форма заявки на настройку базового шаблона оформления.

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

При выполнении заявок категории «Гарантийная техподдержка/Бриф на стилизацию СЭО», специалисты технической поддержки руководствуются информацией, предоставленной Заказчиком в брифе на стилизацию СЭО 3КL, и правилами п. 16 действующего Регламента предоставления сервисов ООО «Открытые технологии».
Обратите внимание: настройка базового шаблона оформления в рамках гарантийной технической поддержки выполняется для одной Инсталляции продукта, по одному брифу и допускает не более двух последующих бесплатных корректировок.
Дополнительная информация в вебинаре «Бриф по настройке внешнего вида СЭО 3KL».

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

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

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

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

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

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

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

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

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

Суммарная трудоемкость сервиса 20 нормо-часов.
С подробным описанием, условиями и маршрутом предоставления сервиса можно ознакомиться в п. 17 действующего Регламента предоставления сервисов ООО «Открытые технологии».

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

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

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

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

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

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

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

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

Исходный материал*: пожелания по структуре и внешнему виду; заполненный бриф; учебные материалы для курса; материалы для оформления курсов, направлений, категорий и витрины.
Результат сервиса: настроенная система с полноценным курсом.
_______________________________
* - предоставляется Заказчиком.

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

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

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

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

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

Суммарная трудоемкость сервиса 10 нормо-часов.
С подробным описанием, условиями и маршрутом предоставления сервиса можно ознакомиться в п. 22 действующего Регламента предоставления сервисов ООО «Открытые технологии».

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

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

Исходный материал*: заявка с материалами и данными.
Результат сервиса: зависит от пожеланий, указанных в заявке, чаще всего — электронный курс.
_______________________________
* - предоставляется Заказчиком.

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

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

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

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

Исходный материал*: заявка с  исходными данными и материалами.
Результат сервиса: зависит от пожеланий, указанных в заявке.
_______________________________
* - предоставляется Заказчиком.

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

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

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

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

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

Задача:

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

Рис. 5.1.1. Блоки, размещенные в кастомном регионе.

Решение:

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

Рис. 5.1.2. Настройки кастомных регионов для страницы описания курса.

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

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

Рис. 5.1.3. Кнопка добавления сегмента в строку.

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

Рис. 5.1.4. Кнопка увеличения ширины сегмента.

Рис. 5.1.5. Сегмент шириной в четыре условные единицы.

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

Рис. 5.1.6. Регион, заполненный тремя сегментами, шириной четыре условных единицы.

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

Рис. 5.1.7. Добавление нового блока на страницу описания курса.

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

Рис. 5.1.8. Переход к настройкам блока «Поделиться ссылкой».

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

Рис. 5.1.9. Настройка блока «Поделиться ссылкой».

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

Рис. 5.1.10. Выбор размещения блока «Рейтинг курса».

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

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

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

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

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

Рис. 5.1.12. Настройка сворачивания региона «Над контентом».
Подробная информация о регионах в соответствующем разделе статьи «Настройки темы оформления «СЭО 3КL».

Результат:

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

Рис. 5.1.13. Страница описания курса «Устройство мотоцикла. Для демонстрации» с настроенным и заполненным блоками кастомным регионом «Над контентом».

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

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

Рис. 5.2.1. Страница «Цветовая схема». Разделы настроек «Глоссарий, ссылки автоматического связывания» и «Глоссарий, ссылки автоматического связывания при наведении».

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

Рис. 5.2.2. Заданный цвет текста ссылок автоматического связывания.

Рис. 5.2.3. Заданный цвет текста ссылок автоматического связывания при наведении.

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

Теги: администрирование, внешний вид, техподдержка
Рейтинг ответа: 4.75 (4 оценок)

Комментарии запрещены