Видеоуроки. Анимация

Содержание

Видеоуроки

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

Сейчас мы пользуемся видеоматериалами с Rutube и VK Видео. Как вставить видео из этих источников:

На странице видео нажать «Еще» и «Экспортировать».
Далее появится страница, где можно скопировать код.
В редакторе урока вставьте код в блок «Произвольный HTML» и добавьте после <iframe слово videourok.

А если видео не полностью подходит к уроку?

Скрыть

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

Каналы на YouTube с качественными уроками:

KhanAcademyRussian
Ваш Учитель
Смирнова научит
Математик МГУ

Зачем нужны видеоуроки?

Скрыть

Один из сценариев использования Образавра – как агрегатора видеоуроков.

Ученик, который не любит читать, зайдет на Образавр, чтобы посмотреть лучший видеоурок по нужной теме, не тратя времени на поиски и не отвлекаясь на сторонние рекомендации Youtube. После просмотра видео ученик выполняет практические задания, прочитывая конспект, если остались пробелы в понимании;
Ученик может посмотреть альтернативное объяснения в видеоуроке, если не понял содержание текста.

{"questions":[{"content":"Как сделать так, чтобы подобранное вами видео обрело пометку «Видеоурок» и отображалось как выделенный блок? [[fill_choice_big-1]]","widgets":{"fill_choice_big-1":{"type":"fill_choice_big","options":["Выбрать выравнивание по центру","Отметить время начала и завершениях показа","Написать в заголовке «Видеоурок» вручную"],"placeholder":0,"answer":0}}}]}

Анимация

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

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

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

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

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

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

Порядок действий

Создайте блок «Произвольный 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>

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

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

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

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

<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 этим ничего не поделать. Можно попробовать вставить анимацию в колонку, уменьшив тем самым занимаемое ей место, а лучше просто найти другую.