Сегодня наконец-то мы изобрели лекарство для приложения GetCourse, добавляющее навигационное меню «хлебные крошки» и заголовки в приложение GetCourse!
Теперь не нужно вставлять заголовки с помощью html! Во время перехода в настройки кода скрипты сохраняют в атрибуты страницы заголовок и хлебные крошки, чтобы потом они подключились в чатиум. Однако заходить в каждый тренинг для «фикса гк» довольно заморочено, поэтому был дописан еще и парсер тренингов, который проходится по всем тренингам школы и сохраняет там атрибут заголовка, проставляя тренингу галочку. 2-3 секунды на тренинг и вуаля — за 5 минут в нашей тестовой школе с 268 тренингами у всех тренингов начинают работать заголовки и хлебные крошки в приложении. 😎
Теперь не нужно вставлять заголовки с помощью html! Во время перехода в настройки кода скрипты сохраняют в атрибуты страницы заголовок и хлебные крошки, чтобы потом они подключились в чатиум. Однако заходить в каждый тренинг для «фикса гк» довольно заморочено, поэтому был дописан еще и парсер тренингов, который проходится по всем тренингам школы и сохраняет там атрибут заголовка, проставляя тренингу галочку. 2-3 секунды на тренинг и вуаля — за 5 минут в нашей тестовой школе с 268 тренингами у всех тренингов начинают работать заголовки и хлебные крошки в приложении. 😎
🔥10❤1
ДИЗАЙН-МАКЕТ СТАНДАРТНОГО GC
В свободное от работы, ведения бесплатного канала с разработками по таплинку, преподавания в клубе магии CSS и создания разработок на перспективу для GC я занимаюсь отрисовкой стандартного геткурса в фигме.
Использовать такой стандартный макет вы можете по ссылке: https://www.figma.com/file/S9leldSZmYTNKJOR6vefSN/GC-Zero-v2.0?type=design&node-id=1052%3A422&t=ReFByfMuikBmvWT5-1
Отрисовывается он с помощью инструмента разработчика и делается в натуральном размере — если в геткурсе от заголовка раздела покупок отступ снизу 17px, то и в макете он ровно столько же. Большинство страниц сделаны в автослоях для удобства дальнейшего использования 👌
Вам макет может пригодиться:
1. Для дачи ТЗ на созвонах дизайнерам и техспецам, если вы продюсер. Сможете показать что и где хотите поменять
2. Для создания дизайн-макета, если вы веб-дизайнер. Просто возьмите готовый компонент и добавьте цвета — вам не придется с нуля отрисовывать гк интерфейс, узнавать у разрабов про размер колонки и т.д.
3. Для упрощенного взаимодействия с дизайнерами, если вы разработчик. После того, как я стал давать этот файлик дизайнером, количество макетов с шириной макета по типу 4678px и обилием отсутствующих в гк кнопок уменьшилось в разы
4. Для дизайнеров стандартного гк — посмотрите, что вы наделали!
P.S. Макет будет периодически дополняться, на очереди состояния уроков и мобильная версия
В свободное от работы, ведения бесплатного канала с разработками по таплинку, преподавания в клубе магии CSS и создания разработок на перспективу для GC я занимаюсь отрисовкой стандартного геткурса в фигме.
Использовать такой стандартный макет вы можете по ссылке: https://www.figma.com/file/S9leldSZmYTNKJOR6vefSN/GC-Zero-v2.0?type=design&node-id=1052%3A422&t=ReFByfMuikBmvWT5-1
Отрисовывается он с помощью инструмента разработчика и делается в натуральном размере — если в геткурсе от заголовка раздела покупок отступ снизу 17px, то и в макете он ровно столько же. Большинство страниц сделаны в автослоях для удобства дальнейшего использования 👌
Вам макет может пригодиться:
1. Для дачи ТЗ на созвонах дизайнерам и техспецам, если вы продюсер. Сможете показать что и где хотите поменять
2. Для создания дизайн-макета, если вы веб-дизайнер. Просто возьмите готовый компонент и добавьте цвета — вам не придется с нуля отрисовывать гк интерфейс, узнавать у разрабов про размер колонки и т.д.
3. Для упрощенного взаимодействия с дизайнерами, если вы разработчик. После того, как я стал давать этот файлик дизайнером, количество макетов с шириной макета по типу 4678px и обилием отсутствующих в гк кнопок уменьшилось в разы
4. Для дизайнеров стандартного гк — посмотрите, что вы наделали!
P.S. Макет будет периодически дополняться, на очереди состояния уроков и мобильная версия
Figma
GC Zero v2.0
Created with Figma
🔥32❤2👌2😎2
ВЫЗОВЫ URL С КИРИЛЛИЦЕЙ
Есть в GC такой блок в процессах как "вызов URL". Использоваться может много для чего, но техспецы могут столкнуться с необходимостью создать там запрос на рассылку или добавление какой-либо инфы в смс-центры\сейлботы и прочее
Как составить правильно? Простой вызов в духе https://example.com?message=Здарова, ученики вызовет ошибку. Даже если вы предварительно вставите этот текст в адресную строку и браузер перекодирует вам адрес в https://example.com?message=Здарова,%20ученики, все равно геткурс ничего никуда не отошлет.
Чтобы не морочиться с декодированием кириллицы в гк есть один простейший способ. Просто создайте допполе типа "строка", поменяйте значение строки с помощью процесса для нужного количества пользователей, а затем вызовите урл по инструкции гк https://getcourse.ru/blog/275857
Например, при вызове по пользователям будет
Есть в GC такой блок в процессах как "вызов URL". Использоваться может много для чего, но техспецы могут столкнуться с необходимостью создать там запрос на рассылку или добавление какой-либо инфы в смс-центры\сейлботы и прочее
Как составить правильно? Простой вызов в духе https://example.com?message=Здарова, ученики вызовет ошибку. Даже если вы предварительно вставите этот текст в адресную строку и браузер перекодирует вам адрес в https://example.com?message=Здарова,%20ученики, все равно геткурс ничего никуда не отошлет.
Чтобы не морочиться с декодированием кириллицы в гк есть один простейший способ. Просто создайте допполе типа "строка", поменяйте значение строки с помощью процесса для нужного количества пользователей, а затем вызовите урл по инструкции гк https://getcourse.ru/blog/275857
Например, при вызове по пользователям будет
https://example.com?message={object.mailmessage} будет браться содержимое поля mailmessage, автоматичеки декодироваться и отсылаться👍5🔥4❤2
РАЗРАБОТКА НА ПЕРСПЕКТИВУ — ЧАЕВЫЕ В ГК
Суть решения — позволяет нажать кнопку "поблагодарить" у профиля учеников вашего курса. При нажатии на кнопку система запускает процесс гк, проверяющий у вас наличие бонусных рублей, и если они есть, делает вызов на php-страничку, создающую заказ для пользователя, которого вы поблагодарили, а также списывает с вас 25 рублей за благодарность. По заказу уже можно выдать второму пользователю бонусные рубли и что угодно, Параллельно на странице с кнопкой проверяется наличие ответа от сервера, и если деньги были, можно сделать красивое сообщение об успехе. Если денег не было, можно сделать красивое сообщение о неудаче 😁
Пока что разработка оформлена только в виде концепта, но уже вполне рабочего и без возможности поломаться или быть взломанной. Если вам будет интересно что-то подобное в вашей школе — пишите в личку @onthewaytothesun
Суть решения — позволяет нажать кнопку "поблагодарить" у профиля учеников вашего курса. При нажатии на кнопку система запускает процесс гк, проверяющий у вас наличие бонусных рублей, и если они есть, делает вызов на php-страничку, создающую заказ для пользователя, которого вы поблагодарили, а также списывает с вас 25 рублей за благодарность. По заказу уже можно выдать второму пользователю бонусные рубли и что угодно, Параллельно на странице с кнопкой проверяется наличие ответа от сервера, и если деньги были, можно сделать красивое сообщение об успехе. Если денег не было, можно сделать красивое сообщение о неудаче 😁
Пока что разработка оформлена только в виде концепта, но уже вполне рабочего и без возможности поломаться или быть взломанной. Если вам будет интересно что-то подобное в вашей школе — пишите в личку @onthewaytothesun
❤5🔥4😍2
Media is too big
VIEW IN TELEGRAM
Теги для уроков
Почему бы и нет? Буквально вчера вечером пришла идея сделать теги, которые будут удобно набираться, как на ютубе, а потом из числа набранных тегов чтобы можно было их удобно раскидать на уроки. Сказано — сделано. Реализована механика добавления и удаления тегов, включения\выключения их на уроке и набросан простенький фильтр для тегов, хотя интерпретировать теги на уроках можно по-разному: и фильтры делать, и группировать как заблагорассудится👌Сам редактор тегов грузится на странице с уроками автоматически в каждом редакторе с уроками
Теперь возможности оформления личных кабинетов с последующей no-code подгонкой под разные тренинги подросли еще на порядок
Почему бы и нет? Буквально вчера вечером пришла идея сделать теги, которые будут удобно набираться, как на ютубе, а потом из числа набранных тегов чтобы можно было их удобно раскидать на уроки. Сказано — сделано. Реализована механика добавления и удаления тегов, включения\выключения их на уроке и набросан простенький фильтр для тегов, хотя интерпретировать теги на уроках можно по-разному: и фильтры делать, и группировать как заблагорассудится👌Сам редактор тегов грузится на странице с уроками автоматически в каждом редакторе с уроками
Теперь возможности оформления личных кабинетов с последующей no-code подгонкой под разные тренинги подросли еще на порядок
🔥10❤3😍3
GETCOURSE В TELEGRAM WEB APP
Часто ли вам мешает сложный механизм идентификации пользователя в тг из кабинета гк? По умолчанию гк доступ к пользователям не предоставляет 🤷🏻♂️
Но есть отличное решение от самого Telegram. Попробуйте воспользоваться меню бота https://t.me/OneWayGCBot
Посмотрите на формы в веб-приложении: такое устройство гк внутри тг позволяет собирать автоматически ники и айди телеграмма. Это техническое поле можно скрыть — и ученик не будет даже знать, что вы собрали по нему статистику. Все функции гк при этом будут работать, даже оформленный лк 😅
При этом этот бот может быть связан с гк стандартными способами и выполнять все свои родные функции
Часто ли вам мешает сложный механизм идентификации пользователя в тг из кабинета гк? По умолчанию гк доступ к пользователям не предоставляет 🤷🏻♂️
Но есть отличное решение от самого Telegram. Попробуйте воспользоваться меню бота https://t.me/OneWayGCBot
Посмотрите на формы в веб-приложении: такое устройство гк внутри тг позволяет собирать автоматически ники и айди телеграмма. Это техническое поле можно скрыть — и ученик не будет даже знать, что вы собрали по нему статистику. Все функции гк при этом будут работать, даже оформленный лк 😅
При этом этот бот может быть связан с гк стандартными способами и выполнять все свои родные функции
👍4❤3🔥2
Кейсы One Way Studio теперь еще доступнее!
Теперь просмотреть примеры мелких работ по оформлению личных кабинетов, такие как календари, прогрессбары и т.д. можно будет просмотреть в боте https://t.me/OneWayGCBot
Просто напишите ему в чат /devs или выберите команду "тестовые разработки" в меню бота и получите возможность не только увидеть, как работают те или иные разработки, но и пощупать их собственноручно, например, поменять прогрессбару значения максимальных и текущих достижений для перерисовки прогресса.
Также в макете GC Zero был доработан раздел шаблонного урока и начата мобильная версия. Дальнейшие доработки будут делаться в копии https://www.figma.com/file/S9leldSZmYTNKJOR6vefSN/GC-Zero-v2.0?type=design&node-id=0%3A1&t=fWlDz8tBUIy2maFu-1
Теперь просмотреть примеры мелких работ по оформлению личных кабинетов, такие как календари, прогрессбары и т.д. можно будет просмотреть в боте https://t.me/OneWayGCBot
Просто напишите ему в чат /devs или выберите команду "тестовые разработки" в меню бота и получите возможность не только увидеть, как работают те или иные разработки, но и пощупать их собственноручно, например, поменять прогрессбару значения максимальных и текущих достижений для перерисовки прогресса.
Также в макете GC Zero был доработан раздел шаблонного урока и начата мобильная версия. Дальнейшие доработки будут делаться в копии https://www.figma.com/file/S9leldSZmYTNKJOR6vefSN/GC-Zero-v2.0?type=design&node-id=0%3A1&t=fWlDz8tBUIy2maFu-1
🔥7❤1
МАКЕТ СТАНДАРТНОГО GC ЗАВЕРШЕН
Дизайн стандартного гк готов https://www.figma.com/file/S9leldSZmYTNKJOR6vefSN/GC-Zero-v2.0?type=design&node-id=1052%3A422&t=q5LN5vB7TBqrxaTm-1
Также был добавлен раздел правил дизайна (основные правила, которые могут помочь обычным дизайнерам быстрее освоиться в веб-дизайне для GC и не только)
И стартовала разработка раздела "референсов", где будут собраны все возможные концепты различных разработок, которые когда-либо были в различных школах
Дизайн стандартного гк готов https://www.figma.com/file/S9leldSZmYTNKJOR6vefSN/GC-Zero-v2.0?type=design&node-id=1052%3A422&t=q5LN5vB7TBqrxaTm-1
Также был добавлен раздел правил дизайна (основные правила, которые могут помочь обычным дизайнерам быстрее освоиться в веб-дизайне для GC и не только)
И стартовала разработка раздела "референсов", где будут собраны все возможные концепты различных разработок, которые когда-либо были в различных школах
🔥23❤4🙏1
This media is not supported in your browser
VIEW IN TELEGRAM
СМЕНА ШАПКИ ТРЕНИНГОВ В 2 КЛИКА
Небольшая разработка для школ на базе оформления OneWay и Remake: возможность установки виджета, позволяющего перезагрузить картинку шапки для ПК и мобильной версии.
Загруженные картинки ставятся внутрь блока с ксс стилями страницы, так что картинку впоследствии можно легко удалить при необходимости. Если загрузить картинку, то она заменит собой предыдушую без возможных багов и сбоев 👌
Небольшая разработка для школ на базе оформления OneWay и Remake: возможность установки виджета, позволяющего перезагрузить картинку шапки для ПК и мобильной версии.
Загруженные картинки ставятся внутрь блока с ксс стилями страницы, так что картинку впоследствии можно легко удалить при необходимости. Если загрузить картинку, то она заменит собой предыдушую без возможных багов и сбоев 👌
🔥4
Очередной кейс оформления с админкой
В одной из школ в тренингах уроки и тренинги расположены вперемешку, сперва тренинг на всю ширину сетки, затем 5 уроков, дальше еще 1 тренинг и снизу еще череда уроков с тренингами.
Решается такая проблема просто — с помощью админки, которая собирает тренинги и уроки в единую сущность "урокотренинг" 😅 и позволяет перетаскивать такой урокотренинг, просто потянув на значок с 6 точечками. После перетягивания можно назначить сущности категорию, которая будет влиять на ее внешний вид. Вуаля — и сетку в любом тренинге можно будет менять в no-code режиме😎
В одной из школ в тренингах уроки и тренинги расположены вперемешку, сперва тренинг на всю ширину сетки, затем 5 уроков, дальше еще 1 тренинг и снизу еще череда уроков с тренингами.
Решается такая проблема просто — с помощью админки, которая собирает тренинги и уроки в единую сущность "урокотренинг" 😅 и позволяет перетаскивать такой урокотренинг, просто потянув на значок с 6 точечками. После перетягивания можно назначить сущности категорию, которая будет влиять на ее внешний вид. Вуаля — и сетку в любом тренинге можно будет менять в no-code режиме
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤3
Что делать, если вы вставили в урок блок редиректа или код со сломанными тегами и он не открывается?
Добейте его моим скриптом Воспользуйтесь скриптом-помощником. Он создаст только для админов кнопки открытия редактора блоков, в котором можно удалять и восстанавливать блоки урока
Скрипт можно вставлять в настройки аккаунта или userJS.
Скрипт:
Скрипт можно вставлять в настройки аккаунта или userJS.
Скрипт:
window.userInfo.isAdmin&&$(()=>{$(".lesson-list li").length&&($(".lesson-list li").each(function(){$(this).append(`<button class="block-edit btn-success" onclick="window.open('/pl/teach/control/lesson/blocks?id=${$(this).find($("a")).attr("href").match(/\d+/)}')">Редактор блоков</button>`)}),$("body").append("\n\t<style>.lesson-list li {\n\t\tposition:relative;\n\t\t\n\t}\n\t.block-edit {\n\t\tposition:absolute;\n\t\ttop:50%;\n\t\tright:10px;\n\t\ttransform:translateY(-50%);\n\t\t\n\t}\n\t</style>\n\t")),-1!==window.location.href.indexOf("/lesson/")&&-1===window.location.href.indexOf("editMode=1")&&-1===window.location.href.indexOf("update")&&-1===window.location.href.indexOf("blocks?")&&$(".page-actions").append(`<button class="block-edit btn-success" onclick="window.open('/pl/teach/control/lesson/blocks?id=${window.location.href.match(/\d+/)}')">Редактор блоков</button>`)});
User JS — это расширение, в котором вы можете включить скрипт только у себя, что исключит любые поломки школы, а главное, тогда не нужно мучиться с его установкой в школу. Ссылка на User JS — https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld?hl=ru🔥9❤2👏2
ВИДЕО С ТАЙМКОДАМИ: ФИНАЛЬНАЯ ВЕРСИЯ
После очередной доработки кода таймкодов он перекочевал со старой версии на совершенно другой код, т.к. была переписана с нуля вся механика работы 😄
В новой версии видео с таймкодами:
1. Учтены все проблемы совместимости с разными школами
2. Убрана возможность вставлять видео по ссылке. Теперь вставляются только плейлисты, а гайд по созданию плейлистов прямо в геткурсе есть в админке кода. Плейлисты были выбраны как самый надежный метод воспроизведения видео
3. Добавлена возможность ускорять и замедлять видео
4. Добавлена возможность менять качество видео
5. Видео нельзя скачать — уровень защиты как у стандартного гк
6. Админка таймкодов генерируется сразу после добавления блока таймкодов
7. Добавлена валидация таймингов — теперь если ввести не в формате чч:мм:сс, админка подсветит это поле и укажет на возможность поломки таймкода, если не поправить
8. Теперь таймкоды можно перетаскивать, меняя их положение на опубликованной странице.
9. Добавлена навигация стрелочками и пауза\воспроизведение нажатием пробела
10. Все стили и скрипты подключаются с защитой от кеширования, чтобы добавив обновление можно было моментально отследить работу даже в чатиуме
11. Добавлено воспроизведение видео "картинка в картинке"
Осталось только протестировать на всех устройствах и с понедельника код таймкодов с no-code заполнением будет доступен к покупке за демократичные 10т.р.😎
После очередной доработки кода таймкодов он перекочевал со старой версии на совершенно другой код, т.к. была переписана с нуля вся механика работы 😄
В новой версии видео с таймкодами:
1. Учтены все проблемы совместимости с разными школами
2. Убрана возможность вставлять видео по ссылке. Теперь вставляются только плейлисты, а гайд по созданию плейлистов прямо в геткурсе есть в админке кода. Плейлисты были выбраны как самый надежный метод воспроизведения видео
3. Добавлена возможность ускорять и замедлять видео
4. Добавлена возможность менять качество видео
5. Видео нельзя скачать — уровень защиты как у стандартного гк
6. Админка таймкодов генерируется сразу после добавления блока таймкодов
7. Добавлена валидация таймингов — теперь если ввести не в формате чч:мм:сс, админка подсветит это поле и укажет на возможность поломки таймкода, если не поправить
8. Теперь таймкоды можно перетаскивать, меняя их положение на опубликованной странице.
9. Добавлена навигация стрелочками и пауза\воспроизведение нажатием пробела
10. Все стили и скрипты подключаются с защитой от кеширования, чтобы добавив обновление можно было моментально отследить работу даже в чатиуме
11. Добавлено воспроизведение видео "картинка в картинке"
Осталось только протестировать на всех устройствах и с понедельника код таймкодов с no-code заполнением будет доступен к покупке за демократичные 10т.р.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👏2❤1🤮1💩1🖕1
Как передать UTM-метки в GC с любого источника
Подготовили для вас статью по передаче UTM-меток в GC в том числе через виджет GC
Посмотреть работу передачи меток в виджет можно на этой странице (в ссылку зашиты тестовые метки)
Подготовили для вас статью по передаче UTM-меток в GC в том числе через виджет GC
Посмотреть работу передачи меток в виджет можно на этой странице (в ссылку зашиты тестовые метки)
Teletype
Как передать UTM-метки в GC с любого источника
GC-формы могут располагаться внутри страниц GC и внутри виджетов. В случае со страницами пробросить метки очень легко
❤1👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Прогрессы с общей видимостью результатов
Никого в геткурсе уже не удивить прогрессбарами или сменённой боковой менюшкой, однако коллективные достижения целей, рейтинги и прочие механики, в которых где-то собирается общий прогресс учеников, в геткурсе в новинку
Оно и понятно: в геткурсе негде хранить эту информацию и нужно прибегать к бекенду — сторонним базам данных для хранения всего такого. Однако, как оказалось, в качестве таких баз данных довольно легко и просто использовать гугл-таблицы. Поэтому представляем вашему вниманию виджет рейтинга, в котором можно вносить свои данные и прикреплять фото-доказательство своих достижений, а затем по результатам лучшего ученика и вашим выстроится прогрессбар. Все изменения при этом хранятся в гугл-таблицах и в полном no-code режиме можно отслеживать прогресс учеников и устанавливать новые виджеты.
Полное видео работы и скриншоты админки в комментариях к посту
Никого в геткурсе уже не удивить прогрессбарами или сменённой боковой менюшкой, однако коллективные достижения целей, рейтинги и прочие механики, в которых где-то собирается общий прогресс учеников, в геткурсе в новинку
Оно и понятно: в геткурсе негде хранить эту информацию и нужно прибегать к бекенду — сторонним базам данных для хранения всего такого. Однако, как оказалось, в качестве таких баз данных довольно легко и просто использовать гугл-таблицы. Поэтому представляем вашему вниманию виджет рейтинга, в котором можно вносить свои данные и прикреплять фото-доказательство своих достижений, а затем по результатам лучшего ученика и вашим выстроится прогрессбар. Все изменения при этом хранятся в гугл-таблицах и в полном no-code режиме можно отслеживать прогресс учеников и устанавливать новые виджеты.
Полное видео работы и скриншоты админки в комментариях к посту
🔥10❤2