Как создаются уроки

Для новых авторов:

1. Ознакомьтесь с видеоинструкциями про создание урока, повторяя действия в черновике;
2. Изучите руководство на этой странице (здесь не все, что есть в видеоинструкциях);
   • Если вы работаете над материалами по английскому языку, изучите специальные функции;
   • Если над материалами по точным наукам или химией, изучите, как оформляются формулы;
3. Изучите руководство по созданию тестов;
4. Ознакомьтесь с базовыми правилами SEO оптимизации уроков.

Другие инструкции:

• Инструкция по бренду, персонажам и иллюстрациям
• Как добавить флеш-карточки

Ссылки:

• Проверить, в каких материалах используется изображение;

Язык

• Обращение к ученику только на «вы»;
• Повествование от 2-го лица мн. числа: «Рассмотрим, проверим, попробуем» и т.д;
• Не связывайте урок со временем и остерегайтесь «воды», например «Сегодня разберем..», «На этом уроке поговорим…»;
• Используйте лексику, соответствующую возрастной группе учеников;
• Не начинайте предложение с «Давайте», «Сейчас».
• Восклицательные предложения используйте в крайних случаях;

Правописание:

• Буква «ё» пишется только тогда, когда возможно неправильное прочтение слова, нужно указать правильное произношение редкого слова, предупредить речевую ошибку и в собственных именах. В остальных случаях – «е»;
• Между математическими знаками и числами нужен пробел: 3 + 4 = 7; 85 %.
• Не используйте верхний регистр. ЧИТАЕТ КНИГУ – «Читает книгу»;
• Различайте тире и дефис;
• Отбивайте большие числа пробелами: 58 000, 2 000 065;
• Используйте двойные кавычки в редакторе, на сайте они превращаются в «елочки»;
• Не забывайте точки в конце каждого полного предложения (кроме инструкций в тестах).
• Не пишите слова на иностранных языках, иностранные слова нужно давать в русской транскрипции: от греч. «антропос» — человек;
• В конце названия уроков, тестов и других материалов точка не ставится.

Структура урока

1. Видеоурок (если есть);
2. Введение, если нужно – краткая справка по предыдущему материалу, нужного для этого урока (содержание генерируется автоматически);
3. Основная часть:
   • Урок делится на небольшие секции с заголовками (секции не больше 1500 символов);
   • Перед каждым заголовком или каждые 700 символов – мини-тест;
   • Каждые 2000 символов – изображение (можно чаще);
   • Идеальный объем урока – 8000 символов. Если можно разделить урок на две части, лучше разделить;
4. Упражнения для самостоятельной работы из учебника, рабочей тетради с решением (копировать дословно, пример);
5. Часто задаваемые вопросы.

Общие рекомендации

1. Урок – не справочник. На каждый теоретический материал приводите примеры;
2. Не должно быть больше 3 абзацев «голого» текста подряд. Старайтесь использовать разные блоки: блоки с фоном, изображения, цитаты, таблицы и т. д.
3. Приводите определения терминов и понятий, которые ученики могут не знать или не помнить (даже если они были в уроках предыдущих классов).

Небольшие абзацы

Чтобы создать абзац, нажмите Enter (пока редактируете предыдущий).

Чтобы сделать пропуск строчки внутри одного абзаца (не создавая новый абзац), зажмите Shift и нажмите Enter.

Следите, чтоб в одном абзаце было не более 4-х строк (при предпросмотре), это усложняет восприятие, поэтому делите слишком большой текст.

Выделение жирным

Все новые термины и важные моменты нужно выделять жирным (только 1 раз). В других случаях жирный текст используется.

Ссылки на другие уроки

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

Не делайте ссылку на уроки того же предмета из курсов сложнее, чем текущий. Допускается для ссылок на гуманитарные предметы, где для понимания темы не нужны знания прошлых курсов.

Ссылки на другие сайты делайте только при крайней необходимости.

Блоки

Видеоурок

Зачем мы добавляем видеоуроки?

Скрыть

Примечания к видео (посмотрите)

Скрыть

Тесты внутри урока

Тест внутри урока (мини тест) содержит 1-3 вопроса, нужен для выделения важных моментов урока, а не для проверки знаний. По ним генерируется режим пошагового прохождения.

Чтобы добавить мини-тест внутри урока:

1. Cоздайте тест на странице создания тестов;
2. Скопируйте разметку теста, выбрав тип теста «Внутри статьи», у вас будет что-то похожее:

<div class="test"><pre><textarea>{"questions":[{"content":"Сколько будет 2+2?[[input-7]]","widgets":{"input-7":{"type":"input","answer":"4"}},"hints":[]}]}</textarea></pre></div>

3. В редакторе создайте блок «Произвольный HTML» в том месте, где хотите разместить мини тест;
4. Вставьте разметку в этот блок.

Определение

Чтобы добавить определение (правило) с рамкой, нужно добавить блок «Цитата».

Это определение в рамке.

Используйте только для самых важных моментов в уроке. Для более объемных описаний правил используйте блок с фоном и рубрикой.

Изображения

В нашей библиотеке (вкладка «Медиафайлы») есть множество готовых изображений, которые можно вставить в урок. Чтобы вставить изображение из медиафайлов, добавьте блок «Изображение» и выберите «Библиотека файлов».

Как искать картинки

Скрыть

В поле поиска можно ввести разные варианты запроса (лучше попробовать все):

• Русскими словами латиницей
• Русскими словами
• Английскими словами

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

Папки в нашей библиотеке:

1. Без категории – картинки, нарисованные иллюстратором, которые можно использовать в уроках разных предметов для украшения;
2. Из интернета – картинки и фотографии из интернета;
3. Чертежи/Схемы и дочерние папки – чертежи, схемы, нарисованные иллюстратором.

Горизонтальные изображения (ширина значительно больше высоты) лучше растягивать на всю ширину редактора (больше 900 пикселей).

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

Схемы, рисунки, карты и т.п. из интернета нужно отправлять иллюстратору для перерисовки, прежде чем использовать в уроке.

Фотографии из интернета должны быть в хорошем качестве с шириной минимум 1700 пикселей.

Инструкция

Часто задаваемые вопросы

Это рубрика

Цветной блок

Используется для отделения основного контента от второстепенного, например для интересных фактов.

Нужно:

• Cобрать блоки в группу. Для этого зажимаем Shift и выбираем все блоки, которые нужно включить, затем выбираем «Группа»;
• В настройках группы выбрать только цвет фона. Цвет текста при просмотре на сайте будет другой;
• Чтобы первый абзац в группе отобразился как рубрика, к блоку абзаца нужно добавить CSS класс «rubric». Рубрики обязательны.

Таблицы

Показать/скрыть контент

Показать инструкцию

Скрыть инструкцию

Показать чертёж

С помощью этой функции можно, например, дать ученику шанс самому нарисовать чертёж, если он не дан в задаче.

Для этого нужно добавить дополнительный класс CSS к картинке: «chert».

Колонки

Классы, модули, главы

У каждой записи (урока) есть рубрика, её необходимо выбрать, чтобы урок правильно отображался.

• Рубрики имеют иерархию:
  • Предметы делятся на классы обучения (курсы)
    • Классы на делятся модули
      • Модули делятся на главы, в главах содержатся уроки, тесты и карточки.

Для урока нужно выбрать только одну, самую нижнюю рубрику (главу).

Количество символов в уроке

Нажмите на кнопку «Обзор документа» с тремя полосками в левом верхнем углу редактора. В появившейся панели наверху нажмите «Схема».

SEO оптимизация с Yoast SEO

Чтобы уроки чаще попадали в топ поиска, необходимо проводить SEO оптимизацию.

Подробнее

Анимации

Отличный способ сделать урок красочнее и увлекательнее, особенно для учеников средней и начальной школы.

Мы используем бесплатные анимации с lottiefiles (Products -> Free animations). Сайт на английском и искать лучше тоже на английском.

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

Можно искать отвлечённые анимации, которые как-то связаные с темой урока. Например, в уроке про скорость есть анимация с машиной, найти эту анимацию можно по запросу «car».

Анимации должны вписываться в стиль сайта и быть векторными — если их приблизить, не появятся пиксели. Размер анимации — не более 60 кб dotLottie.

Если из-за цветов анимация не вписывается в стиль, их можно заменить там же, в редакторе Lottie на цвета бренда.

Когда вы нашли анимацию:

1. Создайте блок «Произвольный HTML» и вставьте этот код туда:

<script type="module" src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>

<dotlottie-player autoplay loop mode="normal" src="ССЫЛКА_НА_АНИМАЦИЮ" style="max-width: 100%;height: auto;"></dotlottie-player>

2. Скачайте файл dotLottie (попросят сначала добавить в Workspace);

3. Загрузите файл в наши медиафайлы и скопируйте ссылку;

3. Замените текст «ССЫЛКА_НА_АНИМАЦИЮ» на эту ссылку;

5. Если анимация слишком большая, используйте этот код, заменив МАКС_ШИРИНА на число:

<script type="module" src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>

<dotlottie-player autoplay loop mode="normal" src="ССЫЛКА_НА_АНИМАЦИЮ" style="max-width: МАКС_ШИРИНАpx;height: auto;"></dotlottie-player>

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

Примеры подходящих анимаций

Примеры неподходящих анимаций