ЧТО ДАНО:
Курс с загруженными уроками в количестве 85 шт. без разделения на модули.
ЧТО НЕОБХОДИМО СДЕЛАТЬ:
- Разделить уроки на модули.
- Настроить последовательный доступ к каждому модулю после прохождения предыдущего.
- Оформить главную страницу курса.
- Оформить все полученные страницы модулей со списком уроков.
- Оформить все уроки курса (85 уроков).
- Оформить боковую панель меню.
1 ЭТАП РАБОТЫ - НАСТРОЙКА КУРСА
- Разделение уроков на модули:
- модуль “Предобучение”
- вводный модуль;
- 10 основных модулей;
- модуль “Экзаменационная практика”
модуль “Факультет кармической регрессии”
2. Настройка доступов.
После разделения уроков на модули, необходимо было сделать так, чтобы модули не открывались все сразу и без применения расписания уроков.
Для этого в каждом модуле сделаны все необходимые настройки для последовательного доступа к модулям после прохождения предыдущего. То есть, чтобы приступить к новому уровню, ученикам нужно будет завершить все домашние задания предшествующего модуля.
2 ЭТАП РАБОТЫ - ОФОРМЛЕНИЕ КУРСА
- Оформление главной страницы курса.
- Установка и оформление главного баннера + баннер с изображением диплома.
- Установка, настройка и оформление блока “Последний просмотренный урок”:
- для корректной работы данного блока произведены все необходимые настройки в каждом уроке с применением JavaScript кода;
- сделана анимация кнопки и иконки внутри блока.
- Установка, настройка и оформление блока “Ваши данные”:
- отображение данных ученика, которые он может изменить, нажав на кнопку;
- сделана анимация кнопки и иконки внутри блока.
- Установка, настройка и оформление блока “Режим работы службы заботы”:
- нажав на кнопку, ученик переходит на страницу обратной связи. Здесь можно поставить любую другую ссылку для обратной связи;
- сделана анимация кнопки и иконки внутри блока.
- Оформление списка модулей:
- для каждого модуля создана и установлена тематическая иконка;
- модули оформлены прямоугольными плашками. При наведении сделана анимация, то есть модули меняют цвет с плавным перемещением на несколько пикселей вправо.
Сделана адаптация оформленной страницы под все устройства различных форматов.
2. Оформление всех модулей со списком уроков.
- Установка и оформление баннера с названием модуля и логотипом школы.
- Установка и оформление кнопки “Вернуться к списку модулей”.
- Установка блока “Режим работы службы заботы”.
- Оформление списка уроков:
- уроки оформлены прямоугольными плашками с автоматическим отображением установленных тематических картинок;
- при наведении на урок сделана анимация;
- проработаны все виды уроков - “нет задания”, “есть задание”, “задание выполнено”, “задание на проверке”, необходимо выполнить задание”, “урок не доступен”;
- установлены соответствующие иконки на каждый вид урока.
Сделана адаптация оформленных страниц под все устройства различных форматов.
3. Оформление всех уроков курса.
- Оформление шапки урока под общий стиль курса.
- Установка соответствующих иконок в шапке.
- Анимация при наведении на кнопки “предыдущий урок” и “следующий урок”
- Проработка всех возможных блоков урока:
- заголовок;
- текстовый блок;
- домашнее задание;
- блок с комментариями;
- блок с анкетой;
- блок с тестом;
- блок с прикрепленными файлами;
- блок с ссылками.
Сделана адаптация оформленных страниц под все устройства различных форматов.
4. Стилизация боковой панели меню.
Стандартный дизайн главного меню совсем не вписывается в новое оформление курса. И, конечно же, для визуального восприятия будет уместно оформить боковую панель в едином стиле всего курса.
С помощью CSS code я сделала меню более уникальным и привлекательным:
- Изменила цвет фона для меню и его элементов.
- Заменила иконки для всех пунктов меню.
- Изменила стиль кнопок меню и добавила плавную анимацию при наведении.
- Изменила стили для активного и выделенного состояния кнопок.
- Изменила стили виджета в мобильной версии.
- Изменила стили текста и фона выпадающего меню.
- Установила цвет и плавную анимацию при наведении на пункты подменю.
ОФОРМЛЕНИЕ УРОКОВ ДЛЯ ПРИЛОЖЕНИЯ
Приложение (Chatium) GetCourse позволяет ученикам школ проходить тренинги с мобильного устройства без необходимости открытия и авторизации на сайте GetCourse. Функционал приложения мало в чем уступает платформе на ПК.
Но если ваш курс красиво оформлен на ПК, то, к сожалению, всё это оформление с учетом установленных настроек подтянется к приложению только частично. Даже если сделана адаптация под все мобильные устройства. Как например, уроки в приложении будут выглядеть не так красиво как на ПК.
Поэтому для уроков в приложении необходимо дополнительно прописывать стили CSS. При этом необходимо учитывать, что в уроке есть 3 вкладки (урок, задание, ответы). Следовательно для каждой вкладки нужно прописывать стили CSS.
В данном примере оформления уроков проработаны все вкладки.
⚡⚡Хотите, чтобы ваш проект на GetCourse был уникальным и привлекал клиентов? Я помогу вам с дизайном и версткой.
Свяжитесь со мной:
@AlyonaPush⚡⚡