Гайдбук по «сборке»
курсов
О гайде
В данном гайдбуке вы получите необходимые знания для сборки курсов Центров госуслуг на платформе Tilda. Вы всегда можете обратиться к боковому меню, чтобы перейти к нужному лонгриду и освежить в памяти отдельные моменты.

Общие положения

В документе изложена информация о:

  • настройке страницы
  • работе с текстом
  • работе с таблицами
  • работе с кнопками
  • настройках кода
  • работе с основными шаблонами
Цвета
Рабочий сценарий курса представлен в виде макета в Figma пример можно посмотреть нажав на ссылку.
Цвета макета

Цвета, используемые в макете, соответствуют брендбуку Центров госуслуг.
Основная цветовая палитра
Палитра с кодами HEX
#1F1F1F
#552211
#C89569
#E2D5CC
#F2EDE9
#F0EDEA
#7E89FD
Шрифты
Шрифтовая гарнитура Open Sans
При создании курсов используется шрифтовая гарнитура Open Sans.

В верстке используются начертания:

  • Regular
  • Bold
  • Semibold
  • Italic

Краткое описание начертаний, используемых в курсах:
Работа с макетом Figma
Макет, это не только цвета и текст — это прототип будущего курса, который мы будем верстать в Tilda. Пример макета можно посмотреть по ссылке, либо в окне ниже.
Структура макета
Макет состоит из нескольких стандартных составных частей:

  1. Хедер, включает в себя:
  • меню-бургер
  • прогресс-бар
  • кнопку
  • строку состояния

2. Обложка, включает в себя:
  • логотип
  • заголовок
  • дату создания курса
  • кнопку
3. Разделительные блоки

Применяются после каждого тематического блока с чередованием движения облака:
справа налево и слева направо
4. Блок приветствия
5. Следующий блок идентичный для всех курсов — это блок «Введение. Цель и краткое содержание курса». Из курса в курс в данном блоке изменяется только текст, в зависимости от его цели и задач.
6. Следующий идентичный для всех курсов блок - Описание услуги, представляет собой аккордеон
7. Далее идентичными блоками являются:

  • необходимый комплект документов
  • прием документов
  • выдача результата предоставления услуги
  • хранение документов
  • итоги
Ознакомиться с визуалом вышеописанных блоков можно нажимая указатели
8. После блока Итоги в каждом курсе расположен футер, представляющий собой изображение, представленное ниже
Навигационные элементы
Для размещения контента в курсе и удобной навигации используются:

  • всплывающие окна (pop-up)
  • подсказки (hint)
  • ссылки (link)
  • кнопки (button)
pop-up элемент, который в наших курсах носит информационный характер.

При клике на выделенный текст появляется всплывающее окно с заголовком и текстом, либо с изображением.
Если pop-up включает изображение, обратите внимание на его качество:

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

В курсе применяются несколько типов кнопок. Мы не будем рассматривать кнопки бургер-меню, кнопку завершить, основную кнопку.

Непосредственно в теле лонгрида применяются:

  • кнопки под скачивание и просмотр документов
  • кнопки начала и окончания вопросов самопроверки
Отступы
Рассмотрим систему отступов для десктопной версии:
На изображении мы видим, что отступы между:

  • заголовком и основным текстом — 40px
  • подзаголовком и основным текстом — 20px
  • разделительным блоком и заголовком — 60px
  • разделом и кнопкой — 40px
Перенос контента из макета Figma производится в 100% соответствии, за исключением случаев невозможности реализации задумки дизайна в Tilda. Согласование изменений производится с ответственным дизайнером и методологом.
Верстка курса в Tilda
Создание папки
Процесс создания папки курса можно посмотреть в видео:
Таким образом, для создания папки курса необходимо:
Нажмите Создать новый сайт.
Нажмите Настройки сайта
Введите Название сайта (соответствует году курса), например МФЦ 5, в описании какой год
Введите Субдомен на Тильде mfc_год, указанный в писании, например mfc_2023
Во вкладке Шрифты и цвета выберете Open Sans , в Расширенных настройках установите:

  • Насыщенность текста - Normal
  • Размер текста - 18px
  • Насыщенность заголовков - Bold,
  • Цвет текста - #1f1f1f
  • Цвет ссылок - #7e89fd
  • Толщина подчеркивания - 2px
  • Цвет подчеркивания - #7e89fd
  • Цвет ссылок при наведении - #3a4bff
  • Цвет подчеркивания при наведении - #3a4bff
Зайдите во вкладку Ограничить доступ:

  • установите Логин cto_edu_mos
  • установите Пароль zaq123
Зайдите во вкладку Еще:

  • Загрузите Favicon (логотип МФЦ в формате svg, можно выгрузить из макета Figma)
  • Выключите Lazy Load изображений
  • Подключить jQuery на страницах сайта
Шаблоны
Перед тем как приступить к верстке, можете ознакомиться с другими курсами в папке.

Мы рассмотрим два способа создания страницы курса:

  1. Дублирование страницы готового курса
  2. Создание новой страницы курса

Дублирование страницы готового курса
Зайдите в Папку с курсами
Нажмите Настройки
Перейдите в Действия
Нажмите Дублировать страницу на экране вы увидете сообщение Копия страницы успешно создана!

Страница - копия будет располагаться внизу списка страниц.
Для того, чтобы перенести страницу в другую папку возле созданной страницы:

  • перейдите в Настройки
  • перейдите в Действия
  • нажмите Перенести страницу
  • выберете Папку для переноса
Создание новой страницы курса с «нуля»
Нажмите «+» или «Создать новую страницу»
Выберите «Пустая страница». Начать с чистого листа
Нажмите кнопку ZERO
В новом окне браузера откройте любую папку с курсами
Откройте любой курс или курс, который по структуре напоминает ваш
В правом верхнем углу нажмите на стрелочку
Выберете функцию Выделить
Слева выделите блоки, которые необходимо скопировать
Нажмите в панели выбора Копировать, как показано на видео
Откройте вкладку с ZERO Block
С помощью стрелочки в правом верхнем углу (показано на видео) вставте скопированные блоки, после - удалите блок ZERO
Для вашего удобства, мы создали отдельную страницу со всеми вариантами возможных шаблонов, с ее помощью можно создать любой курс, как конструктор, просто копируя блоки или даже целые разделы, вставлять их в курс с последующим изменением под свой макет.
Для того, чтобы работать с шаблонами в режиме редактора — необходимо перейти в Папку Архив МФЦ и открыть страницу Шаблоны
Для просмотра без возможности редактирования можно перейти нажав на кнопку Шаблоны
Неразрывный пробел и мягкий перенос
Неразрывный пробел — специальный символ, который «связывает» два слова. Это позволяет избежать ситуации, когда одно слово остается на одной строке, а второе переносится на следующую.

В наших курсах мы обязательно пользуемся неразрывным пробелом, чтобы не нарушать читаемость текста.

Чтобы поставить неразрывный пробел, добавьте между словами:
Случаи, когда используется неразрывный пробел:

  • Инициалы (Пушкин А. С.)
  • Сокращения с точками (и т. д., и т. п.)
  • Числа с последующим словом или единицей измерения (20 котят, 42 км, 1984 г.)
  • Предлоги, союзы и некоторые частицы (ни страны, ни погоста)
  • Тире с предыдущим словом (иду — красивый, двадцатидвухлетний)
Мягкий перенос — спе­ци­аль­ный неви­ди­мый сим­вол для ука­за­ния мест внут­ри сло­ва, по ко­то­рым это сло­во мо­жет быть пе­ре­не­се­но на дру­гую строку.

Чтобы поставить мягкий перенос, добавьте между символами:
Работа с текстовым редактором
Текстовый редактор — важный инструмент при работе над контентом.
Перейти
Перейти
Перейти
Перейти
Перейти
Добавление и редактирование текста
Наполнить блоки курса текстом можно двумя способами: с помощью панели «Контент» блока и при клике на текст на странице редактирования страницы.
Форматирование текста
Как и в других популярных текстовых редакторах, на Тильде можно задать форматирование для вашего текста. Вы можете выделить главное, отметить нюансы, подчеркнуть важное, или зачеркнуть неактуальный текст.

Текстовый редактор Тильды позволяет быстро изменить цвет текста, размер, его жирность, шрифт, выравнивание, межстрочное расстояние, а также назначить гиперссылку. Все перечисленные опции доступны в всплывающем контекстном меню.
Типограф
При работе с текстами на кириллице доступен инструмент типограф. Он поможет расставить знаки препинания и установить неразрывные пробелы для переноса слов с одной строки на другую. Для его активации достаточно выделить текст в блоке, и затем нажать на иконку «Типограф».
Дополнительно размер, цвет, насыщенность, межстрочное и межбуквенное расстояние можно отрегулировать в меню «Настройки» у блока, с которым вы работаете: Настройки → Типографика
В настройках блока можно вручную задать конкретные значения для размера шрифта, отступов между строками, отступов между текстовыми элементами блока, а также цвет текста, его насыщенность, и непрозрачность.

Если вам нужно применить к тексту блока другой шрифт, то это также можно сделать в настройках. Можно выбрать один из шрифтов, установленных в основных настройках вашего проекта.
При вставке контента из стороннего текстового редактора мы настоятельно рекомендуем очистить стили у такого текста, чтобы не возникло проблем с его форматированием.

Нужно выделить текст и затем нажать на иконку «Очистить стили».
Текстовый редактор в Zero Block
При работе с Zero Block у вас сохраняется возможность редактирования текста с помощью контекстного меню. По аналогии с настройками стандартных блоков, точные параметры можно задать в настройках текстового элемента, с которым вы работаете.

Zero Block позволяет создать собственный уникальный элемент для сайта, поэтому содержит расширенные настройки. Такой настройкой для текста является параметр 'Spacing' — он дает возможность изменить кернинг (межбуквенное расстояние) у слова.

В некоторых стандартных блоках такая опция также присутствует, но чтобы избежать некорректного отображения мы рекомендуем использовать её с осторожностью.
Горячие клавиши при работе с текстовым редактором
Ctrl + B - сделать текст жирным
Ctrl + I - сделать текст курсивом
Ctrl + U - подчеркнуть текст
Ctrl + C - копировать текст
Ctrl + V - вставить текст
Ctrl + A - выделить текст
Ctrl + X - вырезать текст
Ctrl + Z - отменить шаг
Ctrl + delete - удалить целиком слово слева от курсора
Cmd + B - сделать текст жирным
Cmd + I - сделать текст курсивом
Cmd + U - подчеркнуть текст
Cmd + C - копировать текст
Cmd + V - вставить текст
Cmd + A - выделить текст
Cmd + X - вырезать текст
Cmd + Z - отменить шаг
Cmd + delete - удалить целиком слово слева от курсора
Работа с кодом
Прежде, чем приступить к работе с отдельными блоками кода, рассмотрим их применение по всему курсу.
Не все блоки кода необходимо видоизменять!
Общий обзор блоков с кодом можно посмотреть в видео:
Изменению подлежит код, отвечающий за вопросы промежуточного тестирования.
для отображения в хедере навигации (на изучении какого раздела слушатель в данный момент находится) необходимо изменить следующий код:
Для этого в коде прописывается название текущего раздела. Обратите внимание — название должно совпадать и в меню.

Следующий код, который мы меняем/проверяем — это тест-контейнер в промежуточном тестировании.
Нумерация тест-контейнеров начинается с 0. Первый тестовый контейнер имеет нумерацию — 0, второй — 1, третий — 2 и т. д.
Меняем код для вопросов самопроверки
После того, как вы закончили верстку, в макете Figma остались нереализованными вопросы самоконтроля с вариантами ответов.

Прежде чем приступить к их реализации в Tilda, откройте в браузере две одинаковые страницы со своим курсом.

В одной вкладке у нас будет открыт блок с кодом мы будем его изменять, а в другой копировать id необходимых блоков.

Посмотрите видео:
После переноса макета в Tilda у нас остались нереализованными вопросы для самоконтроля (самопроверки) с вариантами ответов.

Для того, чтобы реализовать вопросы мы будем редактировать код по частям. Сначала, отредактируем данную часть кода:
Поменяйте «false» (ложь) на «true» (правда). Это даст возможность просмотра реализованных вопросов на опубликованной странице.
Строка "buttonCheck" включает в себя id кнопки «Вопрос для самопроверки», замените id на свой без #
Строка "idToScrollCheck" включает в себя id поле с кодом вопроса (test-container), замените id на свой без #
Строка "buttonContinue" включает в себя id кнопки «Продолжить», замените id на свой без #
Строка "idToScrollContinue" включает в себя id поля, к которому ведет скролл после нажатия кнопки «Продолжить», замените id на свой без #
Повторите итерации для всех вопросов самоконтроля
Вставляем текст и варианты ответов вопросов самопроверки
Далее в наш код необходимо внести текстовую составляющую вопросов самопроверки.

Возвращаемся к нашему макету Figma, копируем вопрос и его варианты ответа, и вставляем в соответствующие поля:
Определяем последовательность открытия блоков
Слушатель проходит курс и доходит до вопроса самопроверки, при этом последующие тематические блоки курса, должны быть скрыты от него и открываться, только после прохождения вопроса самопроверки.

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

Для более наглядного понимания, предлагаем ознакомиться с видео:
Таким образом:

В кнопку «Вопрос для самопроверки» мы всегда включаем тест-контейнер и кнопку «Продолжить»

В кнопку «Продолжить» может быть включена кнопка «Вопрос для самопроверки», если следом идет еще один вопрос для самопроверки, либо полностью все блоки раздела (ов) до следующей кнопки «Вопрос для самопроверки» включительно.

Опубликуйте страницу, протестируйте курс, поменяйте в коде true на false
Кейсы
Работа с кодом кейсов
В карточке Kaiten перейдите по ссылке Cloude (кейсы и файлы) для сборщика
Скачайте файл с кейсами на ПК
Откройте файл с кейсами.
Код, который мы будем менять в Кейсах представлен на изображении:
В строке const initHidden прописываем id трех блоков, представленных на изображении:
В строке "question" прописываем описание кейса до тега <br>. Далее после тега <strong> прописываем вопрос.

В строках "answers" прописываем варианты ответа.

В строке "correct" прописываем верный вариант ответа.
После публикации протестируйте кейсы, после успешного тестирования поменяйте true на false
Тестирование
Работа с кодом кейсов
Код, который мы будем менять в Тестировании представлен на изображении:
В строке window.initHidden прописываем id трех блоков, представленных на изображении:
Поздравляем! Вы собрали курс!
Если вам удастся найти неточности или вы обнаружите нехватку материала для понимания какой-либо темы, обязательно сообщите нам об этом: напишите на один из адресов электронной почты, указанных ниже, чтобы мы могли оперативно внести изменения.
Руководитель проекта
Методолог
Дизайнер
Сборщик
Made on
Tilda