[Портфолио]Чудесный новый интерфейс для школы на GetCourse
Действующие лица:
Заказчик — Александр Фирсов, владелец школы по криптовалюте
Дизайнер — daniilpostnov, дизайнивший лучший (на мой взгляд) вариант внешнего вида GetCourse под названием Remake
Разработчик — @onthewaytothesun
По задумке школа перестилизовывалась под образы из сказки "Алиса в Стране Чудес". Все модули и уроки содержат большое количество красочных, созданных сугубо для школы растровых иллюстраций и декоративных элементов
Это был самый последний на момент августа 2022 года проект по кастомизации интерфейса, поэтому было решено сделать лучший кейс по этой сфере, что когда-либо был в личном опыте разработчика. Что именно было сделано так, как не было реализовано у других?
- Общая структура школы. Так как дизайнер был создателем Remake, наиболее продуманного и целостного решения по кастомизации, он сделал в дизайне множество элементов, которые были в вышеупомянутом решении. Только вот одна загвоздка: несмотря на сотрудничество с разработчиком Remake, доступа к коду оригинала у разработчика не имелось. Посему под школу был написан эдакий мини-Remake с сохранением его главной фишки: четкой категоризации разных видов страниц, чтобы дальнейшее написание кода строилось под эту категоризацию
- Меню как в Remake. Большинство меню в кастомизациях представляют собой просто новые иконки, цвета и размер меню. В этом же проекте полноценное новое мобильное меню и ПК-версия меню как в Remake. Т.к. доступа к оригиналу Remake не было, была написана "импортозамещенная" версия под проект. От обычного меню оно отличается двумя видами (полным и минифицированным) и построением структуры и наполнения через JS
3. Суперудобная админка в режиме редактирования для легкого наполнения тех элементов, которых в оригинальном геткурсе нет
В оригинальном геткурсе нельзя ставить фоновые картинки для тренингов, а также нельзя ставить новые блоки типа времени прохождения тренинга. Фоновые картинки ставятся разработчиками-новичками через CSS, разработчики "покруче" ставят через JS, беря их из базы чатиума, но в этом проекте ни один из способов не подходил под понятие "лучший". CSS потому, что такие картинки неудобно менять без знания кода, а JS в случае с этой школой не дал бы хорошей оптимизации, т.к. для оптимизации на ПК-версии и на мобильной в случае с иллюстрациями нужны 2 разных файла картинок. Поэтому был добавлен раздел админки, где с ПК не видны мобильные версии картинок (они не грузятся при загрузке страницы и не забирают трафик) и наоборот.
По итогу картинки легко перезагрузить через админку с помощью кнопок "загрузить картинку", а также они минимально загружают страницу, насколько это вообще возможно
4. Решена проблема квадратных превью
Когда вы ставите уроку картинку через стандартный функционал, GC публикует ее превью-версию. png-картинки с прозрачностью, при этом, могут терять в качестве, терять соотношение сторон и т.д. Для решения этой проблемы по идентификатору картинок скрипт переформировывает ссылку на превью-версию в ссылку на оригинальную версию картинки
5. Переделаны все требуемые блоки уроков и сохранены в виде шаблонов
Для наполнения уроков по стандарту используются различные GC-блоки: видео, вставленные файлы для скачивания, анкеты, обратный отсчет. Все блоки, которые будут использоваться в обучении, были переделаны под дизайн и сохранены в шаблон. За 2 клика можно создать любой блок, ввести его контент и он выйдет уже красиво задизайненным
Дизайнеры часто любят рисовать блок тестирования так, как будто он не является подвидом геткурсовского блока "задание", и раньше приходилось их поправлять, чтобы не пришлось слишком много кодить ради небольшой визуальной дифференциации. Однако т.к. в этом проекте была цель сделать лучшее из лучших, была дописана механика замены задания на самостоятельный блок тестирования. Также скрипт проверяет, насколько хорошо сдан урок, и если сдано идеально (2 из 2, левая цифра равна правой), портал синий, если не идеально, портал будет фиолетовым
7. ВСЁ ЭТО РАБОТАЕТ В CHATIUM!
Когда я около года назад начал делать кастомизации интерфейсов, люди удивлялись и тому, что можно делать мобильную версию кастомизации. Сегодня же есть способ кастомизировать и чатиум версию, притом полностью всю, включая внутриуроковый чатиумный интерфейс, который еще и при переключении вкладок не слетает
Скринкаст с чатиума: https://youtu.be/f3GRI3-dk3M
Собственно, это лучшая кастомизация @onthewaytothesun на момент августа 2022г.
